Добавляем эффект выцветания для картинок при наведении в WordPress

Изображения увеличивают юзабилити на сайтах. Именно поэтому стоит оптимизировать изображения, создавать красивые галереи на сайте, в общем, следует обращать внимание на графику. Существует множество способов сделать особенными картинки на своем сайте. Одним из них может быть использование эффекта fade (выцветания) картинок. В этой статье мы покажем вам как реализовать fade-эффект для изображений при наведении мыши в WordPress.

В общем, когда пользователь наведет свой курсор мыши на изображение на вашем сайте, то оно плавно выцветет. Пример можно увидеть на скриншоте ниже:

Сначала мы покажем вам как добавить простой фейд-эффект к картинкам ваших записей WordPress. Для этого будем использовать CSS. Все, что нужно сделать, это скопировать и вставить следующий код в файл style.css вашей темы.

.post img:hover {
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */

Этот CSS сниппет применится ко всем изображениям в блоге. Однако, в сниппете есть недостаток: когда пользователь наводит мышь на изображение, оно моментально меняет прозрачность. Немного смущает, не так ли? Давайте сделаем fade более плавным путем добавления правил transition в CSS.

.post img:hover{
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

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

.post img {
opacity:0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */
}
.post img:hover{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

Некоторые пользователи вероятно не захотят добавлять этот эффект ко всем изображениям в их записях. А как насчет только миниатюр записей? Для добавления эффекта только для миниатюр, можно использовать стандартный класс .wp-post-image, генерируемый WordPress для миниатюр. Просто замените .post img:hover на img.wp-post-image:hover.

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

По всем вопросам и отзывам просьба писать в комментарии ниже.

Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.