Текст, появляющийся при наведении курсора на картинку 4/5 (1)

текст появляющийся при наведении на картинку

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

 

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

Сам же эффект реализуется довольно просто при помощи обычного css и не требует знаний и применения javascript.

Итак, давайте приступим:

  1. Для начала создадим блок с картинкой и назовем его <block_1>, после чего внутрь этого блока поместим блок с нашим текстом и назовем его <block_2>:
<h1>Текст, появляющийся при наведении на картинку</h1>
<div class ="block_1">
<div class="block_2">
<p>Очень интересный и продающий текст..</p>
</div>
</div>

2. Зададим стили для наших блоков :

<style>
body{background:rgb(243, 228, 228);text-align:center;}
.block_1{width:1050px;height:300px;overflow:hidden;position:relative;margin-left:150px;background:url(http://coderistu.ru/wp-includes/images/pumpkin.jpg);background-size:cover}
.block_2{position:absolute; visibility:hidden;left:1px;background:rgba(0, 0, 0, 0.4392156862745098);font-size:20px;color: white;width: 1050px;height: 300px;top:160px}
.block_2 p {padding: 110px 0px;text-align: center;}
.block_1:hover .block_2{visibility:visible;transition:1s;-webkit-transition:1s;transform:translatey(-160px);-webkit-transform:translatey(-160px)}
.block_1:hover{filter:sepia(50%);-webkit-filter:sepia(60%);transition:0.6s;-webkit-transition:0.6s;}
</style>
Эффект работает следующим образом: блок с текстом, который мы обозначили как .block_2, изначально скрывается при помощи  свойства visibility:hidden. При наведении курсора на блок с картинкой мы делаем его видимым с помощью свойства visibility:visible, а его плавное перемещение задаем свойствами transition:1s и transform:translatey(-160px).

 
ДЕМО

На этом все. Надеюсь, что статья была вам полезной!


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

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