Как сделать эффект выцветания изображений при наведении курсора мыши на WordPress

Как сделать эффект выцветания изображений при наведении курсора мыши на WordPress

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

Основной эффект, когда пользователь наводит свою мышку на изображение, оно будет немного выцветать. Смотрите пример ниже:

Как сделать эффект выцветания изображений при наведении курсора мыши на WordPress

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

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

Этот CSS фрагмент кода будет влиять на все изображения, отображаемых в постах WordPress. Тем не менее, есть небольшое затруднение в этом фрагменте кода. Когда пользователь наводит курсор на изображение, оно переключает непрозрачность мгновенно. Это немного грубо, поэтому мы сделаем эффект немного более гладким, путем добавления правил перехода 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. Для этого, замените .post img:hover на .wp-post-image:hover.

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

Aliexpress INTAliexpress INTAliexpress INT

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

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