Как сделать эффект лупы в css?

Пользователь

от eudora , в категории: HTML/CSS , год назад

Как сделать эффект лупы в css?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от maymie , год назад

@eudora 

Эффект лупы в CSS можно создать с помощью анимации и позиционирования элементов. Вот пример кода:


HTML:

1
2
3
<div class="container">
  <img class="image" src="image.jpg">
</div>


CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
.container {
  overflow: hidden;
  position: relative;
  height: 200px; /* задайте высоту, соответствующую вашей картинке */
  width: 200px; /* задайте ширину, соответствующую вашей картинке */
}

.image {
  position: absolute;
  top: 0;
  left: 0;

  animation: loop 4s linear infinite;
}

@keyframes loop {
  50% {
    transform: scale(1.2);
  }
}


В этом примере контейнер с классом "container" имеет фиксированную ширину и высоту, равную вашей картинке. У него также задано "overflow: hidden", чтобы обрезать изображение до размеров контейнера.


Картинка с классом "image" позиционируется абсолютно внутри контейнера. С помощью анимации "loop" мы увеличиваем размер изображения на 20% в середине анимации (на 50%).


Используя это сочетание позиционирования и анимации, мы создаем эффект лупы, который будет бесконечно масштабироваться и вернется к исходному размеру каждые 4 секунды.

Пользователь

от amaya_bahringer , 7 месяцев назад

@eudora 

Можно также создать эффект лупы в CSS с помощью фильтра CSS "zoom":


HTML:


1 2 3 4 5


CSS:


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16


.container { overflow: hidden; position: relative; height: 200px; /* задайте высоту, соответствующую вашей картинке / width: 200px; / задайте ширину, соответствующую вашей картинке */ }


.image { transition: transform 0.5s; }


.image:hover { transform: scale(1.5); /* Увеличивает размер изображения при наведении курсора */ }


В этом примере мы используем CSS transition и transform для создания эффекта лупы при наведении курсора на изображение. При наведении курсора на изображение, его размер увеличивается в 1.5 раза за 0.5 секунды. Когда курсор убирается с изображения, оно возвращается к исходному размеру.