ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимация CSS изображения при наведений

Анимация CSS изображения при наведений

В данном материале рассмотрим некоторые приемы с помощью CSS, что позволяют нам создавать анимацию при наведении для показа наших изображений. А значит вы сможете красиво предоставить для пользователя и гостей сайта оригинальную анимацию. Которая заключается в том, что изначально мы видим один оттенок цвета, но при наведение цвет быстро будет исчезать, или плавно, здесь сами уже настроите, и появится картинка. Здесь не будем задействовать какой-либо дополнительный элемент, а также псевдоэлемент, здесь только будет img элемент.

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

Мы можем легко обновить направление, отрегулировав paddingнаправление и object-position. Вот первая демонстрация, представленная ранее, которая включает в себя четыре направления.

Эффект раскрытия при наведении с одним элементом

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

Установка:

HTML

Код

CSS

Код

img {
  --s: 200px; /* the image size */

  width: var(--s);
  height: var(--s); /* соотношение сторон */
  box-sizing: border-box;
  object-fit: cover;
  cursor: pointer;
  transition: .5s;
}
img.left {
  object-position: right;
  padding-left: var(--s);
  background: #542437;
}
img.right {
  object-position: left;
  padding-right: var(--s);
  background: #8A9B0F;
}
img.top {
  object-position: bottom;
  padding-top: var(--s);
  background: #E94E77;
}
img.bottom {
  object-position: top;
  padding-bottom: var(--s);
  background: #7A6A53;
}

img:hover {
  padding: 0;
}

На этом все, идем на demo страницу и смотрим, что получилось.

Демонстрация

2 вариант анимации раскрытия изображения

HTML

Код

CSS

Код

img {
  --s: 200px; /* размер должен соответствовать внутреннему размеру изображения для «центра» разного размера */

  width: var(--s);
  height: var(--s); /* соотношение сторон, если изображение имеет атрибут высоты */
  box-sizing: border-box;
  cursor: pointer;
  transition: .5s;
}
img.center {
  object-fit: none; /* обычное значение, но позволяет сохранить внутренний размер заменяемого контента. */
  padding: calc(var(--s)/2);
  background: #88C425;
}
img.vertical {
  object-fit: cover; /* мы также можем использовать здесь «none», это даст тот же результат */
  padding-block: calc(var(--s)/2);
  background: #F07818;
}
img.horizontal {
  object-fit: cover;
  padding-inline: calc(var(--s)/2);
  background: #AB3E5B;
}
/* вы можете использовать любую комбинацию отступов.
  убедитесь, что вкладка покрывает всю область
  также убедитесь, что вы правильно установили положение объекта и его соответствие, чтобы создать иллюзию фиксированного изображения.
*/
img.random {
  object-position: top left;
  object-fit: none;
  padding: 0 var(--s) var(--s) 0;
  background: #0E2430;
}

img:hover {
  padding: 0;
}

Все почти аналогичному первому варианту, но раскрытие с показом совершенно другое. Надеюсь вам понравился этот небольшой эксперимент с CSS, где используя простые приемы, а также несколько строк кода, мы создали классную анимацию раскрытия, используя только img элемент.

Демонстрация

26 Августа 2023 Загрузок: 2 Просмотров: 581 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0