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

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

Прекрасный hover эффект для изображения, который прекрасно подойдет под любую тематическую картинку с выводом информации в материале. Так как существует бесчисленное множество способов создания интересных и уникальных взаимодействий в мире веб дизайна, а эффекты зависания становятся все более популярными. Эффекты Hover обеспечивают элегантные и опрятные способы отображения и скрытия подписи к изображениям, а новые конструкции доступны и готовы к использованию все время. Создание этих эффектов может показаться сложным, но на самом деле это так же просто, благодаря мощной технологии CSS3.

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

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

Так по умолчанию:

Красивая анимация при наведение на CSS

Здесь вы навели курсор и видим изменение:

Приступаем к установке:

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

HTML

Код

<body>
<header>
  <div class="zorsadtun_gukin"><a href="http://zornet.ru"><img src="http://zornet.ru/Aben/ABGDA/zornet_ru/games-zornet.jpg" alt="Анимация при наведении">
  <div class="kasnulergun">
  <h3>Эффект сайта zornet.ru на CSS3</h3>
  <p>Все здесь работает при помощи CSS3, что оригинально и красиво смотрится.</p>
  </div>
  </a></div>
</header>
</body>

CSS

Код

.zorsadtun_gukin {
  width: 375px;
  margin: 63px auto;
  position: relative;
  border: solid 5px rgba(236, 230, 230, 0.8);
  background: linear-gradient(19deg, #e43828, #1a1af1);
  overflow: hidden;
}
.zorsadtun_gukin a {
  display: block;
  color: #f7f0f0;
  text-decoration: none;
}
.zorsadtun_gukin a img{
  width: 100%;
}
.kasnulergun {
  position: absolute;
  top: 0;
  left: 0;
  padding: 38px 19px;
  opacity: 0;
  z-index: 100;
  transition: .5s cubic-bezier(0.25, 0.1, 0.14, 0.92);
}
.kasnulergun h3{
  font-size: 25px;
}
.kasnulergun p{
  font-size: 14px;
}
.zorsadtun_gukin a:before,
.zorsadtun_gukin a:after{
  content: '';
  position: absolute;
  width: 199%;
  height: 199%;
  transition: .5s ease-in-out;
  mix-blend-mode: darken;
}
.zorsadtun_gukin a:before{
  right: 0;
  bottom: -100%;
  background: rgba(230, 12, 50, 0.8);
  transform: skew(-45deg) translateX(100%);
}
.zorsadtun_gukin a:after{
  left: 0;
  top: -100%;
  background: rgba(11, 72, 174, 0.8);
  transform: skew(145deg) translateX(-100%);
}
.zorsadtun_gukin:hover a:before{
  transform: skew(-39deg) translateX(0%);
}
.zorsadtun_gukin:hover a:after{
  transform: skew(145deg) translateX(0%);
}
.zorsadtun_gukin:hover .kasnulergun{
  opacity: 1;
}

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

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

02 Марта 2018 Просмотров: 1796 Комментариев: (1)

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

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

Kosten

Комментарии: 1
Порядок вывода комментариев: netfilmekplus 02 Марта 2018 21:25¹ 0