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. Поворот изображения при наведении
   

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

   

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);
    }