» »

20 hover-эффектов для изображений в CSS

20 hover-эффектов для изображений в CSS

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

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

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

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

HTML

Код
<section id="pedabukasd-medeakolug01">
  <h2>Здесь идет заголовок 01</h2>
  <div class="gtesam-ulopad">
  <figure>
  <img src="http://zornet.ru/_fr/79/s5364383.jpg" alt="">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  <figure>
  <img src="http://zornet.ru/_fr/79/s5364383.jpg" alt="" class="desaldeka01">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  <figure>
  <img src="http://zornet.ru/_fr/79/s5364383.jpg" alt="" class="desaldeka02">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  </div>
</section>

<section id="pedabukasd-medeakolug02">
  <h2>Здесь идет заголовок 02</h2>
  <div class="gtesam-ulopad">
  <figure>
  <img src="http://zornet.ru/_fr/79/s1450668.jpg" alt="">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  <figure>
  <img src="http://zornet.ru/_fr/79/s1450668.jpg" alt="" class="desaldeka01">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  <figure>
  <img src="http://zornet.ru/_fr/79/s1450668.jpg" alt="" class="desaldeka02">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  </div>
</section>

<section id="pedabukasd-medeakolug03">
  <h2>Здесь идет заголовок 03</h2>
  <div class="gtesam-ulopad">
  <figure>
  <img src="http://zornet.ru/_fr/79/s7421267.jpg" alt="">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  <figure>
  <img src="http://zornet.ru/_fr/79/s7421267.jpg" alt="" class="desaldeka01">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  <figure>
  <img src="http://zornet.ru/_fr/79/s7421267.jpg" alt="" class="desaldeka02">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  </div>
</section>

<section id="pedabukasd-medeakolug04">
  <h2>Здесь идет заголовок 04</h2>
  <div class="gtesam-ulopad">
  <figure>
  <img src="http://zornet.ru/_fr/79/s0190167.jpg" alt="">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  <figure>
  <img src="http://zornet.ru/_fr/79/s0190167.jpg" alt="" class="desaldeka01">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  <figure>
  <img src="http://zornet.ru/_fr/79/s0190167.jpg" alt="" class="desaldeka02">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  </div>
</section>

<section id="pedabukasd-medeakolug05">
  <h2>Здесь идет заголовок 05</h2>
  <div class="gtesam-ulopad">
  <figure>
  <img src="http://zornet.ru/_fr/79/s5631584.jpg" alt="">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  <figure>
  <img src="http://zornet.ru/_fr/79/s5631584.jpg" alt="" class="desaldeka01">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  <figure>
  <img src="http://zornet.ru/_fr/79/s5631584.jpg" alt="" class="desaldeka02">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  </div>
</section>

<section id="pedabukasd-medeakolug06">
  <h2>Здесь идет заголовок 06</h2>
  <div class="gtesam-ulopad">
  <figure>
  <img src="http://zornet.ru/_fr/79/s2295779.jpg" alt="">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  <figure>
  <img src="http://zornet.ru/_fr/79/s2295779.jpg" alt="" class="desaldeka01">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  <figure>
  <img src="http://zornet.ru/_fr/79/s2295779.jpg" alt="" class="desaldeka02">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  </div>
</section>

<section id="pedabukasd-medeakolug07">
  <h2>Здесь идет заголовок 07</h2>
  <div class="gtesam-ulopad">
  <figure>
  <img src="http://zornet.ru/_fr/79/s6468451.jpg" alt="">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  <figure>
  <img src="http://zornet.ru/_fr/79/s6468451.jpg" alt="" class="desaldeka01">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  <figure>
  <img src="http://zornet.ru/_fr/79/s6468451.jpg" alt="" class="desaldeka02">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  </div>
</section>

<section id="pedabukasd-medeakolug08">
  <h2>Здесь идет заголовок 08</h2>
  <div class="gtesam-ulopad">
  <figure>
  <img src="http://zornet.ru/_fr/78/7867814.jpg" alt="">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  <figure>
  <img src="http://zornet.ru/_fr/78/7867814.jpg" alt="" class="desaldeka01">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  <figure>
  <img src="http://zornet.ru/_fr/78/7867814.jpg" alt="" class="desaldeka02">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  </div>
</section>

<section id="pedabukasd-medeakolug09">
  <h2>Здесь идет заголовок 09</h2>
  <div class="gtesam-ulopad">
  <figure>
  <img src="http://zornet.ru/_fr/78/7398082.png" alt="">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  <figure>
  <img src="http://zornet.ru/_fr/78/7398082.png" alt="" class="desaldeka01">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  <figure>
  <img src="http://zornet.ru/_fr/78/7398082.png" alt="" class="desaldeka02">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  </div>
</section>

<section id="pedabukasd-medeakolug10">
  <h2>Здесь идет заголовок 10</h2>
  <div class="gtesam-ulopad">
  <figure>
  <img src="http://zornet.ru/_fr/78/9759779.png" alt="">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Чтобы перейти к этой стадии игры, вам нужно привлечь внимание пользователей и удержать их, и лучший способ сделать это - создать сайт.</p>
  </figcaption>
  </figure>
  <figure>
  <img src="http://zornet.ru/_fr/79/s5892717.jpg" alt="" class="desaldeka01">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Чтобы перейти к этой стадии игры, вам нужно привлечь внимание пользователей и удержать их, и лучший способ сделать это - создать сайт.</p>
  </figcaption>
  </figure>
  <figure>
  <img src="http://zornet.ru/_fr/79/s5892717.jpg" alt="" class="desaldeka02">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Чтобы перейти к этой стадии игры, вам нужно привлечь внимание пользователей и удержать их, и лучший способ сделать это - создать сайт.</p>
  </figcaption>
  </figure>
  </div>
</section>

<section id="pedabukasd-medeakolug11">
  <h2>Здесь идет заголовок 11</h2>
  <div class="gtesam-ulopad">
  <figure ontouchstart="this.classList.toggle('hover');">
  <div><img src="https://picsum.photos/300/200?image=248" alt=""></div>
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </figcaption>
  </figure>
  <figure>
  <div><img src="https://picsum.photos/300/200?image=250" alt="" class="desaldeka01"></div>
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </figcaption>
  </figure>
  <figure>
  <div><img src="https://picsum.photos/300/200?image=111" alt="" class="desaldeka02"></div>
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </figcaption>
  </figure>
  </div>
</section>

<section id="pedabukasd-medeakolug12">
  <h2>Здесь идет заголовок 12</h2>
  <div class="gtesam-ulopad">
  <figure>
  <div class="figure-inner">
  <div class="image"><img src="https://picsum.photos/300/200?image=248" alt=""></div>
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </figcaption>
  </div>
  </figure>
  <figure>
  <div class="figure-inner">
  <div class="image"><img src="https://picsum.photos/300/200?image=250" alt=""></div>
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </figcaption>
  </div>
  </figure>
  <figure>
  <div class="figure-inner">
  <div class="image"><img src="https://picsum.photos/300/200?image=111" alt=""></div>
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </figcaption>
  </div>
  </figure>
  </div>
</section>

<section id="pedabukasd-medeakolug13">
  <h2>Здесь идет заголовок 13</h2>
  <div class="gtesam-ulopad">
  <figure>
  <img src="https://picsum.photos/300/200?image=248" alt="">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  <figure>
  <img src="https://picsum.photos/300/200?image=250" alt="" class="desaldeka01">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  <figure>
  <img src="https://picsum.photos/300/200?image=111" alt="" class="desaldeka02">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  </div>
</section>

<section id="pedabukasd-medeakolug14">
  <h2>Здесь идет заголовок 14</h2>
  <div class="gtesam-ulopad">
  <figure>
  <img src="https://picsum.photos/300/200?image=248" alt="">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  <figure>
  <img src="https://picsum.photos/300/200?image=250" alt="" class="desaldeka01">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  <figure>
  <img src="https://picsum.photos/300/200?image=111" alt="" class="desaldeka02">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  </div>
</section>

<section id="pedabukasd-medeakolug15">
  <h2>Здесь идет заголовок 15</h2>
  <div class="gtesam-ulopad">
  <figure>
  <img src="https://picsum.photos/300/200?image=248" alt="">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  <figure>
  <img src="https://picsum.photos/300/200?image=250" alt="" class="desaldeka01">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  <figure>
  <img src="https://picsum.photos/300/200?image=111" alt="" class="desaldeka02">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  </div>
</section>

<section id="pedabukasd-medeakolug16">
  <h2>Здесь идет заголовок 16</h2>
  <div class="gtesam-ulopad">
  <figure>
  <img src="https://picsum.photos/300/200?image=248" alt="">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  <figure>
  <img src="https://picsum.photos/300/200?image=250" alt="">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  <figure>
  <img src="https://picsum.photos/300/200?image=111" alt="">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  </div>
</section>

<section id="pedabukasd-medeakolug17">
  <h2>Здесь идет заголовок 17</h2>
  <div class="gtesam-ulopad">
  <figure>
  <img src="https://picsum.photos/300/200?image=248" alt="">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  <figure>
  <img src="https://picsum.photos/300/200?image=250" alt="">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  <figure>
  <img src="https://picsum.photos/300/200?image=111" alt="">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  </div>
</section>

<section id="pedabukasd-medeakolug18">
  <h2>Здесь идет заголовок 18</h2>
  <div class="gtesam-ulopad">
  <figure>
  <img src="https://picsum.photos/300/200?image=248" alt="">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  <figure>
  <img src="https://picsum.photos/300/200?image=250" alt="">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  <figure>
  <img src="https://picsum.photos/300/200?image=111" alt="">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  </div>
</section>

<section id="pedabukasd-medeakolug19">
  <h2>Здесь идет заголовок 19</h2>
  <div class="gtesam-ulopad">
  <figure>
  <img src="https://picsum.photos/300/200?image=248" alt="">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  <figure>
  <img src="https://picsum.photos/300/200?image=250" alt="">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  <figure>
  <img src="https://picsum.photos/300/200?image=111" alt="">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  <p>Краткое описание по материалу.....</p>
  </figcaption>
  </figure>
  </div>
</section>

<section id="pedabukasd-medeakolug20">
  <h2>Здесь идет заголовок 20</h2>
  <div class="gtesam-ulopad">
  <figure>
  <img src="https://picsum.photos/300/200?image=248" alt="">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  </figcaption>
  </figure>
  <figure>
  <img src="https://picsum.photos/300/200?image=250" alt="">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
  </figcaption>
  </figure>
  <figure>
  <img src="https://picsum.photos/300/200?image=111" alt="">
  <figcaption>
  <h3>Ключевое слово на заголовок</h3>
</figcaption>
  </figure>
  </div>
</section>

CSS

Код
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
* {
  margin: 0;
  padding: 0;
}
body {
  padding: 0 20px 80px;
  color: #333;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}
h1,
h1+p {
  margin: 30px 15px 0;
  font-weight: 300;
}
h1+p a {
  color: #333;
}
h1+p a:hover {
  text-decoration: none;
}
.gtesam-ulopad::after {
  content: '';
  clear: both;
  display: block;
}
h2 {
  margin: 100px 0 10px;
  font-weight: 300;
}
section:first-child h2 {
  margin-top: 0;
}
figure {
  float: left;
  width: 300px;
  margin-left: 30px;
  cursor:pointer;
  height: 200px;
}
figure:first-child {
  margin-left: 0;
}
figure img {
  vertical-align: bottom;
}

.desaldeka01 {
  -webkit-desaldeka: scale(1);
  desaldeka: scale(1);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.desaldeka02 {
  -webkit-desaldeka: rotate(15deg) scale(1.4);
  desaldeka: rotate(15deg) scale(1.4);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
figure:hover .desaldeka01 {
  -webkit-desaldeka: scale(1.2);
  desaldeka: scale(1.2);
}
figure:hover .desaldeka02 {
  -webkit-desaldeka: rotate(0) scale(1);
  desaldeka: rotate(0) scale(1);
cursor:pointer;
}
figure h3 {
  padding: 20px 0 5px;
  color: #fff;
  font-size: 24px;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
}
figure p {
  color: #fff;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
}

/* Effect 01 */
#pedabukasd-medeakolug01 figure {
  position: relative;
  overflow: hidden;
}
#pedabukasd-medeakolug01 figcaption {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 0;
}
#pedabukasd-medeakolug01 figure:hover figcaption {
  opacity: 1;
}

/* Effect 02 */
#pedabukasd-medeakolug02 figure {
  position: relative;
  overflow: hidden;
}
#pedabukasd-medeakolug02 figcaption {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 1;
}
#pedabukasd-medeakolug02 figure:hover figcaption {
  top: 0;
  left: 0;
}

/* Effect 03 */
#pedabukasd-medeakolug03 figure {
  position: relative;
  overflow: hidden;
}
#pedabukasd-medeakolug03 figcaption {
  position: absolute;
  top: 0;
  left: -100%;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 1;
}
#pedabukasd-medeakolug03 figure:hover figcaption {
  top: 0;
  left: 0;
}

/* Effect 04 */
#pedabukasd-medeakolug04 figure {
  position: relative;
  overflow: hidden;
}
#pedabukasd-medeakolug04 figcaption {
  position: absolute;
  top: -100%;
  left: -100%;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 1;
}
#pedabukasd-medeakolug04 figure:hover figcaption {
  top: 0;
  left: 0;
}

/* Effect 05 */
#pedabukasd-medeakolug05 figure {
  position: relative;
  overflow: hidden;
}
#pedabukasd-medeakolug05 figcaption {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  -webkit-desaldeka: rotate(90deg) scale(0);
  desaldeka: rotate(90deg) scale(0);
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 0;
}
#pedabukasd-medeakolug05 figure:hover figcaption {
  -webkit-desaldeka: rotate(360deg) scale(1);
  desaldeka: rotate(360deg) scale(1);
  opacity: 1;
}

/* Effect 06 */
#pedabukasd-medeakolug06 figure {
  position: relative;
  overflow: hidden;
}
#pedabukasd-medeakolug06 figcaption {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  -webkit-desaldeka: rotate(90deg) scale(3);
  desaldeka: rotate(90deg) scale(3);
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 0;
}
#pedabukasd-medeakolug06 figure:hover figcaption {
  -webkit-desaldeka: rotate(360deg) scale(1);
  desaldeka: rotate(360deg) scale(1);
  opacity: 1;
}

/* Effect 07 */
#pedabukasd-medeakolug07 figure {
  position: relative;
  overflow: hidden;
}
#pedabukasd-medeakolug07 figcaption {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  -webkit-desaldeka: rotateX(-180deg);
  desaldeka: rotateX(-180deg);
  -webkit-transition: .5s;
  transition: .5s;
  opacity: 0;
}
#pedabukasd-medeakolug07 figure:hover figcaption {
  -webkit-desaldeka: rotateX(0);
  desaldeka: rotateX(0);
  opacity: 1;
}

/* Effect 08 */
#pedabukasd-medeakolug08 figure {
  position: relative;
  overflow: hidden;
}
#pedabukasd-medeakolug08 figcaption {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  -webkit-desaldeka: rotateY(180deg);
  desaldeka: rotateY(180deg);
  -webkit-transition: .5s;
  transition: .5s;
  opacity: 0;
}
#pedabukasd-medeakolug08 figure:hover figcaption {
  -webkit-desaldeka: rotateY(0);
  desaldeka: rotateY(0);
  opacity: 1;
}

/* Effect 09 */
#pedabukasd-medeakolug09 figure {
  position: relative;
  overflow: hidden;
}
#pedabukasd-medeakolug09 figcaption {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  -webkit-desaldeka: rotateY(-90deg) rotateX(-90deg);
  desaldeka: rotateY(-90deg) rotateX(-90deg);
  -webkit-transition: .5s;
  transition: .5s;
  opacity: 0;
}
#pedabukasd-medeakolug09 figure:hover figcaption {
  -webkit-desaldeka: rotateY(0) rotateX(0);
  desaldeka: rotateY(0) rotateX(0);
  opacity: 1;
}

/* Effect 10 */
#pedabukasd-medeakolug10 figure {
  position: relative;
  overflow: hidden;
}
#pedabukasd-medeakolug10 figcaption {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 0;
}
#pedabukasd-medeakolug10 figcaption h3,
#pedabukasd-medeakolug10 figcaption p {
  position: absolute;
  left: -100%;
  width: 260px;
  padding: 0;
  text-align: left;
  -webkit-transition: .3s;
  transition: .3s;
}
#pedabukasd-medeakolug10 figcaption h3 {
  top: 30px;
}
#pedabukasd-medeakolug10 figcaption p {
  top: 75px;
  font-size: 12px;
}
#pedabukasd-medeakolug10 figure:hover figcaption {
  opacity: 1;
}
#pedabukasd-medeakolug10 figure:hover figcaption h3,
#pedabukasd-medeakolug10 figure:hover figcaption p {
  left: 20px;
}
#pedabukasd-medeakolug10 figure:hover figcaption h3 {
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}
#pedabukasd-medeakolug10 figure:hover figcaption p {
  -webkit-transition-delay: .5s;
  transition-delay: .5s;
}

/* Effect 11 */
#pedabukasd-medeakolug11 figure {
  position: relative;
  -webkit-perspective: 1500px;
  perspective: 1500px;
  -webkit-perspective-origin: 0 50%;
  perspective-origin: 0 50%;
  -webkit-desaldeka-style: preserve-3d;
  desaldeka-style: preserve-3d;
}
#pedabukasd-medeakolug11 figure div {
  overflow: hidden;
}
#pedabukasd-medeakolug11 figcaption {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-desaldeka-origin: 0;
  desaldeka-origin: 0;
  -webkit-desaldeka: rotateY(-90deg);
  desaldeka: rotateY(-90deg);
  -webkit-transition: -webkit-desaldeka .4s, opacity .1s .3s;
  transition: desaldeka .4s, opacity .1s .3s;
  opacity: 0;
}
#pedabukasd-medeakolug11 figcaption h3, #pedabukasd-medeakolug11 figcaption p {
  text-align: left;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
  opacity: 0;
}
#pedabukasd-medeakolug11 figcaption h3 {
  padding: 30px 20px 0;
}
#pedabukasd-medeakolug11 figcaption p {
  padding: 10px 20px 0;
  font-size: 12px;
}
#pedabukasd-medeakolug11 figure:hover figcaption {
  -webkit-desaldeka: rotateY(0);
  desaldeka: rotateY(0);
  -webkit-transition: -webkit-desaldeka .4s, opacity .1s;
  transition: desaldeka .4s, opacity .1s;
  opacity: 1;
}
#pedabukasd-medeakolug11 figure:hover figcaption h3,
#pedabukasd-medeakolug11 figure:hover figcaption p {
  -webkit-transition-delay: .4s;
  transition-delay: .4s;
  opacity: 1;
}

/* Effect 12 */
#pedabukasd-medeakolug12 .figure-inner {
  position: relative;
  -webkit-perspective: 1000;
  perspective: 1000;
  width: 300px;
  height: 200px;
  -webkit-transition: .5s;
  transition: .5s;
  -webkit-desaldeka-style: preserve-3d;
  desaldeka-style: preserve-3d;
}
#pedabukasd-medeakolug12 .image,
#pedabukasd-medeakolug12 figcaption {
  position: absolute;
  width: 300px;
  height: 200px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
#pedabukasd-medeakolug12 .image {
  z-index: 2;
}
#pedabukasd-medeakolug12 figcaption {
  padding: 10px 20px 20px;
  background: #fff;
  border: 2px solid #666;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#pedabukasd-medeakolug12 figcaption h3,
#pedabukasd-medeakolug12 figcaption p {
  color: #555;
}
#pedabukasd-medeakolug12 figure:hover .figure-inner,
#pedabukasd-medeakolug12 figcaption {  
  -webkit-desaldeka: rotateY(180deg);
  desaldeka: rotateY(180deg);
}

/* Effect 13 */
#pedabukasd-medeakolug13 figure {
  position: relative;
  overflow: hidden;
}
#pedabukasd-medeakolug13 figcaption {
  position: absolute;
  bottom: -60px;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 60px;
  background: rgba(0,0,0,.6);
  -webkit-transition: .3s;
  transition: .3s;
}
#pedabukasd-medeakolug13 figcaption h3 {
  padding: 5px 0 0;
  font-size: 18px;
}
#pedabukasd-medeakolug13 figcaption p {
  font-size: 13px;
}
#pedabukasd-medeakolug13 figure:hover figcaption {
  bottom: 0;
}

/* Effect 14 */
#pedabukasd-medeakolug14 figure {
  position: relative;
  overflow: hidden;
}
#pedabukasd-medeakolug14 figcaption {
  position: absolute;
  bottom: 30px;
  right: 40px;
  z-index: 2;
  width: 100%;
  height: 60px;
  background: rgba(0,0,0,.6);
  -webkit-transition: .3s;
  transition: .3s;
}
#pedabukasd-medeakolug14 figcaption h3 {
  padding: 5px 0 0;
  font-size: 18px;
  margin-right: -30px;
}
#pedabukasd-medeakolug14 figcaption p {
  margin-right: -30px;
  font-size: 13px;
}
#pedabukasd-medeakolug14 figure:hover figcaption {
  right: 100%;
}

/* Effect 15 */
#pedabukasd-medeakolug15 figure {
  position: relative;
  overflow: hidden;
}
#pedabukasd-medeakolug15 figcaption h3,
#pedabukasd-medeakolug15 figcaption p {
  position: absolute;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0;
  background: rgba(0,0,0,.6);
  color: #fff;
  text-align: center;
  -webkit-transition: .3s;
  transition: .3s;
}
#pedabukasd-medeakolug15 figcaption h3 {
  top: -40px;
  font-size: 18px;
}
#pedabukasd-medeakolug15 figcaption p {
  bottom: -40px;
  font-size: 13px;
}
#pedabukasd-medeakolug15 figure:hover figcaption h3 {
  top: 0;
}
#pedabukasd-medeakolug15 figure:hover figcaption p {
  bottom: 0;
}

/* Effect 16 */
#pedabukasd-medeakolug16 figure {
  position: relative;
  overflow: hidden;
}
#pedabukasd-medeakolug16 figure img {
  position: relative;
  z-index: 2;
  -webkit-transition: .3s;
  transition: .3s;
}
#pedabukasd-medeakolug16 figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100px;
  background: #46ceb4;
  -webkit-transition: .3s;
  transition: .3s;
}
#pedabukasd-medeakolug16 figcaption h3 {
  padding-top: 15px;
}
#pedabukasd-medeakolug16 figure:hover img {
  -webkit-desaldeka: translateY(-100px);
  desaldeka: translateY(-100px);
}

/* Effect 17 */
#pedabukasd-medeakolug17 figure {
  position: relative;
  overflow: hidden;
  background: #46ceb4;
}
#pedabukasd-medeakolug17 figure img {
  position: relative;
  z-index: 1;
  -webkit-transition: .3s;
  transition: .3s;
}
#pedabukasd-medeakolug17 figcaption {
  position: absolute;
  bottom: -70px;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 70px;
  background: #46ceb4;
  -webkit-transition: .3s;
  transition: .3s;
}
#pedabukasd-medeakolug17 figcaption h3 {
  padding-top: 15px;
}
#pedabukasd-medeakolug17 figure:hover img {
  -webkit-desaldeka: translateY(-40px);
  desaldeka: translateY(-40px);
}
#pedabukasd-medeakolug17 figure:hover figcaption {
  bottom: 0;
  -webkit-desaldeka: translateY(-30px);
  desaldeka: translateY(-30px);
}

/* Effect 18 */
#pedabukasd-medeakolug18 figure {
  position: relative;
  overflow: hidden;
  background: #46ceb4;
}
#pedabukasd-medeakolug18 figure img {
  position: relative;
  z-index: 1;
  -webkit-transition: .3s;
  transition: .3s;
}
#pedabukasd-medeakolug18 figcaption {
  position: absolute;
  bottom: 0;
  right: -170px;
  z-index: 2;
  width: 170px;
  height: 100%;
  background: #46ceb4;
  -webkit-transition: .3s;
  transition: .3s;
}
#pedabukasd-medeakolug18 figcaption h3 {
  padding: 70px 0 5px 15px;
  font-size: 20px;
  text-align: left;
}
#pedabukasd-medeakolug18 figcaption p {
  padding-left: 15px;
  text-align: left;
}
#pedabukasd-medeakolug18 figure:hover img {
  -webkit-desaldeka: translateX(-100px);
  desaldeka: translateX(-100px);
}
#pedabukasd-medeakolug18 figure:hover figcaption {
  right: 0;
  -webkit-desaldeka: translateX(-30px);
  desaldeka: translateX(-30px);
}

/* Effect 19 */
#pedabukasd-medeakolug19 figure {
  position: relative;
}
#pedabukasd-medeakolug19 figure img {
  position: relative;
  z-index: 2;
}
#pedabukasd-medeakolug19 figure h3,
#pedabukasd-medeakolug19 figure p {
  position: absolute;
  bottom: 0;
  left: 10px;
  z-index: 1;
  padding: 0;
  opacity: 0;
  -webkit-transition: .3s;
  transition: .3s;
  color: #555;
  text-align: left;
}
#pedabukasd-medeakolug19 figure h3 {
  font-size: 18px;
}
#pedabukasd-medeakolug19 figure:hover h3 {
  bottom: -35px;
  opacity: 1;
}
#pedabukasd-medeakolug19 figure:hover p {
  bottom: -58px;
  opacity: 1;
}

/* Effect 20 */
#pedabukasd-medeakolug20 figure {
  position: relative;
}
#pedabukasd-medeakolug20 figure img {
  position: relative;
  z-index: 2;
}
#pedabukasd-medeakolug20 figure h3,
#pedabukasd-medeakolug20 figure p {
  position: absolute;
  z-index: 1;
  opacity: 0;
  padding: 0;
  -webkit-transition: .3s;
  transition: .3s;
  color: #555;
  text-align: left;
}
#pedabukasd-medeakolug20 figure h3 {
  bottom: -35px;
  left: 0;
  font-size: 18px;
}
#pedabukasd-medeakolug20 figure p {
  bottom: -33px;
  right: 0;
}
#pedabukasd-medeakolug20 figure:hover h3 {
  opacity: 1;
}
#pedabukasd-medeakolug20 figure:hover p {
  opacity: 1;
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
}

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

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

На этой странице вы найдете замечательных 20 способов, которые можно задействовать при наведения изображение для подписей, где идет код HTML и CSS для каждого эффекта.

Демонстрация
2019-04-27 Загрузок: 1 Просмотров: 404 Комментарий: (0)

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

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

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