Как сделать всплывающую анимацию при наведении на CSS


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

В этой статье я расскажу и покажу на примере как сделать анимацию элементов при наведении на блок с помощью свойства transition


Вот несколько вариантов что мы получим в итоге:

Ссылка на исходники

Fade эффект

HTML

<div class="gallery__item" style="background-image: url('https://s1.1zoom.ru/big0/544/Norway_Mountains_Forests_Geirangerfjord_Canyon_578087_1280x906.jpg');">
   <div class="magnify">
     <img src="https://baukabdi.kz/assets/magnifying-glass2.svg">
   </div>
</div>

Создаем блок gallery__item. Картинку указываем в виде фона. Внутри также создаем блок magnify который будет всплывать при наведении.

CSS

body{
  background-color: #fff;
  box-sizing: border-box;
}

.gallery__item {
  width: 40%;
  height: 10vw;
  display: block;
  -webkit-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  margin-bottom: 5px;
  position: relative;
  cursor: pointer;
}

.gallery__item:hover .magnify img {
  transform: none;
}

.gallery__item:hover .magnify {
  opacity: 1;
}

.magnify {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, .5);
  opacity: 0;
  transition: 0.8s ease
}

.magnify img {
  width: 15%;
  fill: #fff;
  transition: 0.5s ease;
  transform: translateY(10%);
}

Тут кроме кастомных стилей стоит упомянуть: для .gallery__item задаем position: relative чтобы дочерний элемент не выходил за пределы блока.

Для .magnify задаем:

position: absolute чтобы могли легко манипулировать им,

opacity: 0 чтобы изначально скрыть,

transition: 0.8s ease чтобы потом при наведении плавно появлялся.

Для .magnify img также задаем transition. Свойством transform: translateY(10%) немного смещаем вниз.

Теперь при наведении на .gallery__item у magnify меняем свойство на opacity: 1 и за счет transition он отобразится плавно. И при наведении на .gallery__item у .magnify img убираем transform после чего он займет свое основное положение


Эффект zoom

Здесь у .magnify вместо opacity: 0 пропишем transform: scale(0) чтобы уменьшить до нуля и при наведении на .gallery__item transform обнуляем. Также можно уменьшить transitionduration чтобы быстрее появлялся.

Для .magnify img вместо transform пропишем opacity: 0 и при наведении на .gallery__item обнуляем .transform


Появление: сверху/справа/снизу/слева

Здесь нужно для .gallery__item задать overflow: hidden и .magnify скрыть за пределы блока с помощью:

transform: Y(-100%) — скрыть наверх,

transform: X(100%) — скрыть в правую сторону,

transform: Y(100%) — скрыть вниз,

transform: X(-100%) — скрыть в левую сторону

А при наведении на .gallery__item у .magnify обнуляем transform как делали ранее


Эффект вращения

Здесь для .magnify задаем transform: scale(0) rotate(360deg), то есть изначально уменьшаем до нуля и поворачиваем на 360 градусов, а при наведении на .gallery__item обнуляем как обычно transform. В итоге получается эффект вращения.


Увеличение ширины/высоты

Здесь меняем у .magnify transform на scaleX(0) — если хотим чтобы по ширине всплывало и наоборот если по высоте то scaleY(0). Также для .magnify img прописываем position: absolute чтобы его ширина и высота не зависели от родительского блока. Позиционируем img по центру прописывая алгоритм top: 50%; left: 50%; transform: translate(-50%, -50%);

На этом все. Думаю статья была полезным. Наверху есть ссылка на исходнки на Jsfiddle. Пишите комментарий если появились вопросы и всем успехов в обучении!

Оставьте ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *