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

@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 секунды.

@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 секунды. Когда курсор убирается с изображения, оно возвращается к исходному размеру.