Все эффекты css3 при наведении на картинку

Согласитесь кол-во эффектов просто поражает!

Скачать данный пример css анимации для картинок

Также вы можете просмотреть огромный html + css3 код данного примера:

<div style="width: 680px;">
<div class="grow pic"><img alt="girl" src="https://blogprogram.ru/wp-content/uploads/2014/01/14.jpg" /></div>
<div class="shrink pic"><img alt="city" src="https://blogprogram.ru/wp-content/uploads/2014/01/15.jpg" /></div>
<div class="sidepan pic"><img alt="kick" src="https://blogprogram.ru/wp-content/uploads/2014/01/16.jpg" /></div>
<div class="tilt pic"><img alt="" src="https://blogprogram.ru/wp-content/uploads/2014/01/20.jpg" /></div>
<div class="morph pic"><img alt="" src="https://blogprogram.ru/wp-content/uploads/2014/01/25.jpg" /></div>
<div class="blur pic"><img alt="plane" src="https://blogprogram.ru/wp-content/uploads/2014/01/27.jpg" /></div>
<div class="bw pic"><img alt="sea" src="https://blogprogram.ru/wp-content/uploads/2014/01/28.jpg" /></div>
<div class="brighten pic"><img alt="sea" src="https://blogprogram.ru/wp-content/uploads/2014/01/31.jpg" /></div>
<div class="sepia pic"><img alt="people" src="https://blogprogram.ru/wp-content/uploads/2014/01/32.jpg" /></div>
<div class="contrast pic"><img alt="dog" src="https://blogprogram.ru/wp-content/uploads/2014/01/33.jpg" /></div>
<div class="invert pic"><img alt="ipad" src="https://blogprogram.ru/wp-content/uploads/2014/01/37.jpg" /></div>
<div class="opacity pic"><img alt="soccer" src="https://blogprogram.ru/wp-content/uploads/2014/01/38.jpg" /></div>

<style>

/*Стиль всех блоков для картинок*/
.pic {
height: 188px;
width: 188px;
overflow: hidden; /*Скрывает все, что не влазит в блок*/
margin: 9px;
border: 10px solid #fff; /*Для всех браузеров*/
border: 10px solid #eee\9; /*Для IE6, IE7, IE8*/
-webkit-box-shadow: 2px 3px 10px #6E6E6E;
box-shadow: 2px 3px 10px #6E6E6E;
float: left;}
.pic:hover { cursor: pointer;}
/*размеры всех картинок по усолчанию*/
.pic img {
width: 220px;
height: 188px;}

/*Увеличение*/
.grow img {
height: 188px;
width: 188px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;}
.grow img:hover {
width: 300px;
height: 300px;
margin-left: -50px;
margin-top: -50px;}

/*Уменьшение*/
.shrink img {
height: 200px;
width: 200px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;}
.shrink img:hover {
width: 300px;
height: 300px;}

/*Сдвиг влево*/
.sidepan img {
width: 250px;
height: 200px;
margin-left: 0px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;}
.sidepan img:hover {
margin-left: -50px;}

/*небольшой наклон картинки*/
.tilt {
-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;}
.tilt:hover {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);}

/*Бордер с кругом*/
.morph {
-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;
}
.morph:hover {
border: 10px solid #333;
border-radius: 50%;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);}

/*Нечеткая картинка*/
.blur 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;}
.blur img:hover {
-webkit-filter: blur(2px);}

/*ЧЕРНО-БЕЛОЕ*/
.bw {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;}
.bw:hover {
-webkit-filter: grayscale(100%);}

/*ЯРКОСТЬ*/
.brighten img {
-webkit-filter: brightness(100%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;}
.brighten img:hover {
-webkit-filter: brightness(60%);}

/*Сепия*/
.sepia 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;}
.sepia img:hover {
-webkit-filter: sepia(100%);}

/*КОНТРАСТ*/
.contrast 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;}
.contrast img:hover {
-webkit-filter: contrast(185%);}

/*Инверсия*/
.invert 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;}
.invert img:hover {
-webkit-filter: invert(100%); }

/*СРАЗУ МНОГО Эффектов*/
.opacity 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;
}
.opacity img:hover {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
width: 300px;
height: 300px;
margin-left: -60px;
margin-top: -10px}

</style>