2014-05-18

Textual description of firstImageUrl

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 комментариев :

Элси комментирует...

Прикольно) А как можно сделать так, чтобы только в определенном сообщении был эффект?

Иванова Наталья комментирует...

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

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

Иванова Наталья комментирует...

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

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

Элси комментирует...

Извини, не внимательно прочла начало статьи) Спасибо за ответ, Наташа!

Иванова Наталья комментирует...

Элси, ничего страшного)
Я сама такая - читаю по диагонали.

BVB-Russe комментирует...

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

Maximilian Edelman комментирует...

Спасибо очень пригодилось)))

Юлия Гусарь комментирует...

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

Роман комментирует...

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

Иванова Наталья комментирует...

Попробуйте добавить img {
opacity: 0.8;}
img:hover {
opacity: 1;}

Отправить комментарий

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