[Alessio18911]

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

<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:

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