ДОСТИГНУТО:

01.11.2016-300 страниц в индексе Google;
19.01.2017-300 страниц в индексе Яндекса;
03.02.2017-40 ТИЦ;
05.02.2017- сайт принят в DMOZ каталог;

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

.

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

Всем привет!

Я вижу, исходя из Яндекс-метрики, что моим посетителям интересны статьи о hover эффектах css для картинок и сегодня я решил опубликовать статью, посвященную как раз таким эффектам.

Минимум кода, все легко и просто. Кто не хочет разбираться с кодами, может элементарно скопировать нужные эффекты css для картинок или скачать готовый код. Ссылку на скачивание я расположил внизу страницы.
Ну не буду «тянуть кота за хвост» и сразу перейду к делу.

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

Напомню, width — ширина элемента, height — высота. Меняйте эти параметры строго на размеры своих изображений.

Первый hover эффект для картинок, самый простейший. Замена изображения.

Сначала CSS код:

Обратите внимание на путь к картинкам, то-есть прописывайте свой, о размерах я уже упомянул. А дальше по аналогии. Ну и код CSS добавляйте в свою таблицу стилей. HTML разметка:

А этот код, естественно, добавляйте в любое место публикации. В этом примере применены простейшие hover эффекты для картинок, а именно к классу imgBox добавлен псевдокласс hover. Но в этом примере нехватает плавного перехода. Немного усложним наш CSS код и применим CSS-3, для плавной смены картинок.

Второй эффект css для картинок. Подмена картинки с плавным переходом.

CSS код:

HTML разметка:

Здесь, чтобы hover эффекты заработали как нам нужно, а именно для плавного перехода картинок , добавлено свойство transition: all 0.65s ease 0s;, в нем можно поменять 0.65s(это доли секунды) на 0.85s, тогда переход будет медленнее, если наоборот, то эффект будет происходить быстрее. Ну а как быть, если к картинке нужно добавить ссылку?

Третий эффект css для картинок. Добавляем к картинке ссылку.

CSS код:

HTML разметка:

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

Четвертый эффект для картинок. Добавляем к картинке текст.

tekst

CSS код:

HTML разметка:

Ну вот и все на сегодня. Откройте любой CSS справочник, меняйте или добавляйте свои стили, все просто.
— Если вам пригодилась статья «Легкие hover эффекты css для картинок», жмите кнопочки, оставляйте комментарии.
— Посмотрите схожие записи, как варианты ховер эффектов для картинок.

БЕРЕГИТЕ СЕБЯ!

 




лайк

Эти красотки хотят чтобы ты их жестко лайкнул и даже несколько раз твитнул!

Добавить комментарий

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