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

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

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

imagehovereffect[1]

Сначала мы покажем вам как добавить простой фейд-эффект к картинкам ваших записей 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.

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

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

VN:F [1.9.22_1171]
Rating: 4.4/5 (7 votes cast)

Об авторе ADv

Занимаюсь разработкой сайтов и магазинов на WordPress. Оказываю платные помощь и консультации. Skype: advokat_b
  • GemerNap

    весьма полезная статья для эффекта соц. кнопок на сайте

  • Сергей

    просто и работоспособно. отличный способ! но у меня не заработало пока я название класса не написал без пробела. вот так: «post_img».
    а еще я сделал поменьше время, 1 сек. и выцветание 0,4. так эффект лучше видно. тут пример: http://oknarosta54.ru/ (не реклама, просто делюсь)))

  • essa

    подскажите, пожалуйста — как применить этот способ для картинок не только для записей, но и для страниц?

  • Vitaly Fomenko

    В веб-дизайне частичная прозрачность также применяется и достигается за счёт формата цвета RGBA, который задаётся только для фона элемента
    http://site-fi.ru/effekt-prozrachnosti-pri-navedenii-na-ssylku/

Scroll To Top