ZorNet.Ru — сайт для вебмастера » HTML и CSS » Создаем hover-эффект CSS3 для изображений

Создаем hover-эффект CSS3 для изображений

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

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

Создание эффекта наведения с помощью свойств перехода на CSS3

Рассмотрим принцип работы:

1. По умолчанию;

2. При наведение курсора;

Стильная анимация CSS3 эффекта при наведении

Установка:

HTML

Код

<div class="anevocupa_videnue">
<img src="ссылка на картинку" title="" alt="ключевое слово" />
<div class="prosmot_ezulativa">Ваше название</div>
</div>

CSS
1. Установите ширину и высоту вашего изображения.
2. Чтобы центрировать блок, где используйте 0 auto в качестве значения поля.

Код

.anevocupa_videnue {
  display: anevocupa_videnue;
  height: 400px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 599px;
  margin-top: 50px;
}
.anevocupa_videnue img {
  transition: all 1s ease-in-out 0s;
  -moz-transition: all 1s ease-in-out 0s;
  -webkit-transition: all 1s ease-in-out 0s;
  -o-transition: all 1s ease-in-out 0s;
}
.anevocupa_videnue .prosmot_ezulativa {
  background: rgba(0,0,0,0.6);
  bottom: 0;
  color: #fff;
  display: table;
  left: 0;
  opacity: 0;
  padding: 10px 0;
  position: absolute;
  transition: all 0.2s ease-in-out 0s;
  -moz-transition: all 0.2s ease-in-out 0s;
  -webkit-transition: all 0.2s ease-in-out 0s;
  -o-transition: all 0.2s ease-in-out 0s;
  width: 640px;
  text-align: center;
}
.anevocupa_videnue:hover .prosmot_ezulativa {
  opacity: 1;
}
.anevocupa_videnue:hover img {
  transform: scale(1.5) rotateZ(-5deg);
  -moz-transform: scale(1.5) rotateZ(-5deg);
  -webkit-transform: scale(1.5) rotateZ(-5deg);
  -o-transform: scale(1.5) rotateZ(-5deg);
}

Измените значения scale() и rotateZ(), задействована для получить разные результаты основной анимации, где вместо этих данных, здесь можете использовать rotateY() для изменения направления.

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

20 Сентября 2021 Загрузок: 2 Просмотров: 950 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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