Плавное появление/исчезновение изображения при наведении курсора

Автор:
Nurlan Kemelbekov

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

(Внешний вид> Редактор> стили — style.css)
Код для оформления появления/исчезновения изображения при наведении курсора мышки следующий:

img {
 opacity: 1.0;
 transition: opacity 1s ease-in-out;
 -moz-transition: opacity 1s ease-in-out;
 -webkit-transition: opacity 1s ease-in-out;
 }
 a:hover img {
 opacity: 0.6;
 transition: opacity .55s ease-in-out;
 -moz-transition: opacity .55s ease-in-out;
 -webkit-transition: opacity .55s ease-in-out;
 }

Если вы хотите, чтобы изображение исчезало больше (или, может быть, меньше), то поиграйте с числом 0,6 здесь:
opacity: 0.6;
Чем число ниже, например 0,3, изображение исчезнет еще больше. И наоборот, чем выше, например 0,8, даст меньше затухания.
image3

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

img:hover {
opacity: 1.0;
transition: opacity .75s ease-in-out;
-moz-transition: opacity .75s ease-in-out;
-webkit-transition: opacity .75s ease-in-out;
}

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

    Это будет достигнуто следующим образом: Расположите это в файле footer.php перед тегом body

    $(document).ready(function() {
    
    //установите непрозрачность до 0,4 для всех изображений
    //непрозрачность = 1 - полностью непрозрачным
    //непрозрачность = 0 - невидимая
    
    $('.photos img').css('opacity', 0.4);
    
    // когда наведете курсор на выбранном изображении изменить непрозрачность до 1
    $('.photos').hover(
    function(){
    $(this).find('img').stop().fadeTo('slow', 1);
    },
    function(){
    $(this).find('img').stop().fadeTo('slow', 0.4);
    });
    
    });
    

    Определите для этого примерно такие стили:

    .photos 
                {
    display: block;
    position: relative;
    	            
    }
    

    Чтобы это все заработало, для своих картинок примените что-то вроде этого:

    <ul class=»photos»><img src=»» alt=»» width=»» height=»» /></ul>

      image3

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

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



    Вам также может понравиться:


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

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

    * Copy This Password *

    * Type Or Paste Password Here *

    3 × 2 =

    Я просто хотел сказать, как сильно я ценю Ваш комментарий на мой пост. Спасибо Вам !!