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

Хотите ли вы, чтобы изображения исчезали при наведении мыши в WordPress? Затухающие изображения помогают сделать ваш сайт более интерактивным и...

Хотите ли вы, чтобы изображения исчезали при наведении мыши в WordPress?

Затухающие изображения помогают сделать ваш сайт более интерактивным и привлекательным. Кроме того, это может увеличить количество времени, которое посетители проводят на вашем сайте.

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

Зачем нужно затухание изображений при наведении мыши в WordPress?

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

Эффект затухающего изображения позволяет изображениям на вашем сайте медленно появляться или исчезать, когда пользователи наводят на них курсор.

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

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

С учетом сказанного, давайте покажем вам, как добавить затухание изображений при наведении мыши в WordPress, шаг за шагом.

Добавление затухания изображения при наведении мыши в WordPress

Этот учебник требует некоторого базового понимания того, как добавлять CSS-код в WordPress. Для получения более подробной информации см. наше руководство о том, как легко добавить пользовательский CSS на ваш сайт WordPress.

Затем вы можете добавить следующий CSS-код на свой сайт, чтобы добавить простое затухание изображений, которые вы добавляете в посты WordPress.

.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; >

Этот фрагмент кода заставит ваше изображение затухать на 2 секунды, когда пользователь наведет на него курсор. Вы можете сделать «непрозрачность» выше или ниже и изменить «2s ease», чтобы изображение исчезало быстрее или медленнее.

Если вы измените легкость, то убедитесь, что вы изменили ее во всех свойствах (webkit, moz, ms и т.д.).), так что ваш эффект затухания будет работать в любом браузере.

Вот как это будет выглядеть для ваших посетителей.

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

Для этого вставьте приведенный ниже фрагмент 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; >

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

Вот как это будет выглядеть для ваших посетителей.

Добавление эффекта затухающего изображения для Featured Image или Post Thumbnails

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

Для этого просто добавьте следующий фрагмент CSS на свой сайт WordPress.

img.wp-post-image: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:hover с помощью img.wp-post-image:hover . Все остальные изображения в ваших постах останутся прежними.

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

Если вы хотите добавить еще больше эффектов наведения изображения, то смотрите наше руководство о том, как добавить эффекты наведения изображения в WordPress.

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

Источник: www.wpbeginner.com

Оцените статью
Добавить комментарий