Javascript-форум - Создать эффект диафрагмы стилями

Привет всем! Прошу помощи: нужно создать эффект диафрагмы: т.е. есть блок с фотографией, которую не видно. При ховере на него в центре появляется точка, которая увеличивается и превращается в круг в центре блока, через который видна центральная часть фото. На данный момент получилось только так, но это неправильно, т.к. фото сжимается. А этого быть не должно. Подскажите, пожалуйста, как это сделать:

<div class="block">
    <div class="center"></div>
</div>

Код:

.block {

  display: flex;

  height: 500px;

  outline: 1px solid red;

}



.center {

  width: 300px;

  height: 300px;

  margin: auto;

  border: 1px solid red;

  border-radius: 50%;

  transform: scale(0);

  transition: transform 0.5s ease-in-out;

  background-image: url(citati_ob_oseni.jpg);

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

}



.block:hover .center {

  transform: scale(1);

}

http://https://www.google.by/search?q=%D1%84%D0%BE%D1%82%D0%BE+%D0%BE%D1%81%D0% B5%D0%BD%D0%B8&rlz=1C1CHWL_ruBY820BY820&tbm=isch&s ource=iu&ictx=1&fir=cVOVFPYjzIvf7M%253A%252CFz3Zze Y7ojWL_M%252C_&usg=AI4_-kRZEoXuA7LY7tN6Xf-cYJCz7bQrcA&sa=X&ved=2ahUKEwjPqNP_t6zeAhWLjywKHSbl CVsQ9QEwBHoECAYQDA#imgrc=cVOVFPYjzIvf7M:

Ссылка на картинку для примера.