CSS эффекты изображений при наведении курсора

css эффектов при наведении на изображение
В этом обзоре вы увидите примеры css эффектов при наведении на изображение. Как подключить эффекты к blogger – в редакторе html кода найдите отрезок
]]></b:skin>  и вставьте перед ним предложенный код. Для того, чтобы применить эффект к изображениям в блоге wordpress, нужно заменить в кодах .post-body img на img или на класс изображения, который вы можете узнать так и вставить полученный код в таблицу стилей (файл style.css).
Если вы не хотите, чтобы эффекты применялись ко всем изображениям записей блога, а лишь к выборочным картинкам, то добавьте класс, например, .effectCss. Тогда код, который будем добавлять в редакторе html примет вид

img.effekctCss  {бла-бла-бла}
img:hover.effekctCss  {бла-бла-бла}

а в сообщении (в режиме html) изображение, к которому будет применяться эффект, будем добавлять соответствующий класс:

<img class=”effekctCss”  src=”url картинки">

Примеры css эффектов изображений при наведении вы можете просмотреть в этом видео. Далее в записи вы найдете соответствующие коды.

  1. Уменьшение непрозрачности при наведении курсора на изображение

    .post-body img { opacity: 1; filter: alpha(opacity=100);  }
    .post-body img:hover { opacity: 0.3; filter: alpha(opacity=30);

  2. Эффект появления тени при наведении курсора на картинку

    .post-body img {  border: 1px solid #eee; padding: 10px; } .post-body img:hover { -moz-box-shadow: 0 0 20px #ccc; -webkit-box-shadow: 0 0 20px #ccc; box-shadow: 0 0 20px #ccc; }

  3. Перемещение изображения немного вверх

    .post-body img {
         border: 5px solid #ccc;
         float: left;
         margin: 15px;
         -webkit-transition: margin 0.5s ease-out;
         -moz-transition: margin 0.5s ease-out;
         -o-transition: margin 0.5s ease-out;
    }
    .post-body img:hover {
         margin-top: 2px;
    }

  4. Эффект, благодаря которому все изображения в сообщениях блога переводятся в серый цвет, а при наведении курсора они приобретают обычные цвета. Работает в Google Chrome.

    .post-body img {
         filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
      /* Firefox 3.5+ */
         filter: gray;
      /* IE6-9 */
         -webkit-filter: grayscale(100%);
      /* Chrome 19+ & Safari 6+ */;
    }
    .post-body img:hover {
         filter: none;
         -webkit-filter: grayscale(0%);
    }

  5. Увеличение изображения при наведении. Код css

    .post-body img {
      height: 300px;
      width: 300px;
     
      -webkit-transition: all 1s ease;
         -moz-transition: all 1s ease;
           -o-transition: all 1s ease;
          -ms-transition: all 1s ease;
              transition: all 1s ease;
    }
     
    .post-body img:hover {
      width: 400px;
      height: 400px;
    }

  6. Обратный эффект – уменьшение картинки при наведении реализуется с помощью кода css:

    .post-body img {height: 400px;
      width: 400px;
     
      -webkit-transition: all 1s ease;
         -moz-transition: all 1s ease;
           -o-transition: all 1s ease;
          -ms-transition: all 1s ease;
              transition: all 1s ease;
    }
    .post-body img:hover {
    width: 300px;
      height: 300px;
    }

  7. Сдвиг изображений влево. Эффект можно использовать при создании галереи.

    .post-body img { margin-left: 0px;
      -webkit-transition: margin 1s ease;
         -moz-transition: margin 1s ease;
           -o-transition: margin 1s ease;
          -ms-transition: margin 1s ease;
              transition: margin 1s ease;
    }
    .post-body img:hover {
    margin-left: -200px;
    }

  8. Поворот изображения при наведении css эффектов при наведении на изображение

    .post-body img {   -moz-transition: all 0.6s ease-in-out;
         -webkit-transition: all 0.6s ease-in-out;
         -o-transition: all 0.6s ease-in-out;
         -ms-transition: all 0.6s ease-in-out;
         transition: all 0.6s ease-in-out;
    }
    .post-body img:hover {
    -moz-transform: rotate(30deg);
         -webkit-transform: rotate(30deg);
         -o-transform: rotate(30deg);
         -ms-transform: rotate(30deg);
         transform: rotate(30deg);
    }

  9. Вращение и скругление изображения:

    .post-body img { -webkit-transition: all 0.5s ease;
         -moz-transition: all 0.5s ease;
           -o-transition: all 0.5s ease;
          -ms-transition: all 0.5s ease;
              transition: all 0.5s ease;
    }
    .post-body img:hover {
    border-radius: 50%;
      -webkit-transform: rotate(360deg);
         -moz-transform: rotate(360deg);
           -o-transform: rotate(360deg);
          -ms-transform: rotate(360deg);
              transform: rotate(360deg);
    }

    css эффектов при наведении на изображение

  10. Эффект размытия изображения хорошо работает в choogle chrome.

    .post-body img { -webkit-transition: all 1s ease;
         -moz-transition: all 1s ease;
           -o-transition: all 1s ease;
          -ms-transition: all 1s ease;
              transition: all 1s ease;
    }
    .post-body img:hover {
    -webkit-filter: blur(5px);
    }

10 ответов к «CSS эффекты изображений при наведении курсора»

  1. Элси, вначале записи написано, как сделать, чтобы добавить выборочно эффекты к изображениям.
    Напишу подробнее:
    1. Выбираешь эффект из статьи и копируешь код в блокнот.
    2. Заменяешь в коде .post-body img на img.effekctCss и .post-body img:hover на img:hover.effekctCss
    3. Вставляешь полученный код в редактор шаблона перед кодом ]]>
    4. Сохранить изменения.
    5. Теперь при публикации сообщения, к коду изображения, к которому будет применяться эффект, нужно добавить class=”effekctCss”. Код изображения примет вид: <img class=”effekctCss” src=”url картинки">

    Пиши, если будет непонятно!

  2. Элси, а вот второй вариант, когда в редакторе шаблона, мы добавляем эффект к определенной странице блога. Нужно добавить код перед </head>

    <b:if cond='data:blog.url == "http://адрес_вашей_страницы/"'&gt;
    <style>
    код эффекта изображения (скопировать из статьи)
    </style>
    </b:if>

  3. Здравствуйте, а как сделать эффект, чтобы при наведении курсора на фото было перекрытие желтым цветом в 75 или 50% от истинного RGB?

  4. Спасибо за статью! Для WordPress к стати плагин есть чтобы подобные анимации делать. Вот видеообзор https://www.youtube.com/watch?v=Wtd2e5L47pc

  5. а подскажите какой html код прописать на странице чтоб карнинки слегка затемнялись (или выделялись) при наведении курсора, я что только не перепробовал страница http://lamik59.narod.ru/index/laminat_platinum_power/0-40 у меня 2 редактора визуальный и HTML-кодов заранее спасибо

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

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