Нередко заказчики просят создать на сайте эффект всплывающего текста, появляющегося при наведении курсора на картинку или рекламный баннер. Особенно часто этот приём используется в карточках товаров интернет - магазинов: когда при наведении указателя на фото товарной позиции выскакивает всплывающий блок с информацией о продукте, это выглядит очень эффектно. К тому же значительно повышает конверсию сайта, позволяя посетителю быстро ознакомиться с характеристиками представленных товаров, не "проваливаясь" в карточку.
Помимо текста внутрь всплывающего контейнера можно поместить различные кнопки, офферы или изображения, которые также привлекут внимание потенциальных клиентов вашего веб-ресурса.
Сам же эффект реализуется довольно просто при помощи обычного css и не требует знаний и применения javascript.
Итак, давайте приступим:
- Для начала создадим блок с картинкой и назовем его <block_1>, после чего внутрь этого блока поместим блок с нашим текстом и назовем его <block_2>:
<div class="block_1">
<div class="block_2">
<p>Очень интересный и продающий текст..</p>
</div>
</div>
2. Зададим стили для наших блоков :
body{background:rgb(243, 228, 228);text-align:center;}
.block_1{width:1050px;height:300px;overflow:hidden;position:relative;margin-left:150px;background:url(https://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>
На этом все. Надеюсь, что статья была вам полезной!
