Давненько я не публиковал статьи, праздники, то-се, но сегодня работа над блогом возобновляется.
Я вижу, исходя из Яндекс-метрики, что моим посетителям интересны статьи о hover эффектах css для картинок и сегодня я решил опубликовать статью, посвященную как раз таким эффектам.
Прежде всего предлагаю посмотреть эти hover эффекты вживую.
Минимум кода, все легко и просто. Кто не хочет разбираться с кодами, может элементарно скопировать нужные эффекты css для картинок или скачать готовый код. Ссылку на скачивание я расположил внизу страницы.
Ну не буду «тянуть кота за хвост» и сразу перейду к делу.
Сразу хочу сказать, что при реализации данных эффектов css для картинок нужно строго соблюдать размеры картинок, и менять в моем CSS коде размеры на свои.
Напомню, width
— ширина элемента, height
— высота. Меняйте эти параметры строго на размеры своих изображений.
Первый hover эффект для картинок, самый простейший. Замена изображения.
Сначала CSS код:
.imgBox { width: 200px; height: 150px; margin: 20px auto; background: url(/img/tiger.jpg) no-repeat; } .imgBox:hover { width: 200px; height: 150px; background: url(/img/tiger-hover.jpg) no-repeat; }
Обратите внимание на путь к картинкам, т.е. прописывайте свой, о размерах я уже упомянул. А дальше по аналогии. Ну и код CSS добавляйте в свою таблицу стилей. HTML разметка:
<div class="imgBox"></div>
А этот код, естественно, добавляйте в любое место публикации. В этом примере применены простейшие hover эффекты для картинок, а именно к классу imgBox
добавлен псевдокласс hover
. Но в этом примере нехватает плавного перехода. Немного усложним наш CSS код и применим CSS-3, для плавной смены картинок.
Второй эффект css для картинок. Подмена картинки с плавным переходом.
CSS код:
.imgBox-trans { width: 200px; height: 150px; margin: 20px auto; background: url(/img/tiger.jpg) no-repeat; } .imgBox-trans:hover { width: 200px; height: 150px; background: url(/img/tiger-hover.jpg) no-repeat; transition: all 0.65s ease 0s; } .imgBox-trans:not(:hover) { transition: all 0.65s ease 0s; }
HTML разметка:
<div class="imgBox-trans"></div>
Здесь, чтобы hover эффекты заработали как нам нужно, а именно для плавного перехода картинок , добавлено свойство transition: all 0.65s ease 0s;
, в нем можно поменять 0.65s
(это доли секунды) на 0.85s
, тогда переход будет медленнее, если наоборот, то эффект будет происходить быстрее. Ну а как быть, если к картинке нужно добавить ссылку?
Третий эффект css для картинок. Добавляем к картинке ссылку.
CSS код:
.urlImg { width: 200px; height:150px; display:block; background-image: url('/img/tiger.jpg'); } .urlImg:hover { background-image: url('/img/tiger-hover.jpg'); transition: all 0.65s ease 0s; } .urlImg:not(:hover) { transition: all 0.65s ease 0s; }
HTML разметка:
<a href="#" class="urlImg" title="..." alt="..."></a>
Получается, что картинка как бы накладывается на ссылку. Этим способом можно, например накладкой сделать иконку загрузки, или лупу, если при клике должен открываться лайтбокс. Довольно интересный hover эффект. Ну и последний на сегодня, самый, на мой взгляд, интересный вариант, из всех вышеприведенных hover эффектов для картинок. В качестве накладки на изображение будет текст. Причем этот текст отлично индексируемый.
Четвертый эффект для картинок. Добавляем к картинке текст.
CSS код:
.pic { width:495px; height:260px; background: url(/img/tiger-text.png) no-repeat; margin: 50px auto; } .text { width:495px; height:260px; background:#FFF; opacity:0; box-sizing: border-box; } .pic:hover .text { opacity:0.6; text-align:justify; color:#000000; font-size:20px; font-weight:700; font-family:"Times New Roman", Times, serif; padding:30px; transition: all 0.65s ease 0s; } .pic:not(:hover){ transition: all 0.65s ease 0s; } .text:not(:hover){ transition: all 0.65s ease 0s; }
HTML разметка:
<div class="pic"> <div class="text">Простейшие hover эффекты для картинок, но в то-же время достаточно интересные.</div> </div>
Ну вот и все на сегодня. Откройте любой CSS справочник, меняйте или добавляйте свои стили, все просто.
— Если вам пригодилась статья «Легкие hover эффекты css для картинок», жмите кнопочки, оставляйте комментарии.
— Посмотрите схожие записи, как варианты ховер эффектов для картинок.
А вот исходники всех примеров.
Часы аксессуары в самаре магазины часов самара. https://аконит-ут.рф утилизация отходов 4 класса опасности цена - лицензия на отходы.
Последний эффект очень даже понравился, правда он ни в одной версии CSS еще не принят. До CSS3 такого не было, а в CSS3 данная возможность под вопросом, так что ее могут в любой момент убрать.
transition уже не уберут 🙂
Мне нравятся эффекты. Может когда-нибудь применю на своем блоге.