Легкие hover эффекты css для картинок

Давненько я не публиковал статьи, праздники, то-се, но сегодня работа над блогом возобновляется.
Я вижу, исходя из Яндекс-метрики, что моим посетителям интересны статьи о 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 для картинок», жмите кнопочки, оставляйте комментарии.
— Посмотрите схожие записи, как варианты ховер эффектов для картинок.
А вот исходники всех примеров.

Стоимость утилизации отходов 4 класса опасности вывоз отходов класса опасности. Часы аксессуары в самаре магазины часов самара. Carbiget купить алматы дибикор в алматы.

Похожие по Тегам статьи

Создание Video Background HTML 5

В данной статье идет речь о создании video background — фоновой видео заставки HTML 5 веб страницы

Оформление текста в HTML — Выноски Callout

Публикую несколько примеров оформления текста в HTML. Выноски Callout нужны для заострения внимания читателя…

Системные шрифты, подключение шрифтов к сайту

Шрифты — это неотъемлемая и очень важная часть дизайна сайта, подчеркивающая его индивидуальность. В…