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

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

На эту тему меня подбодрило несколько разных сайтов, где были приведены разные эффекты css3 при наведении на картинку. Я постарался собрать все в одно целое в этой странице.

Объясню кратко принцип работы.

В 1 элемент до наведения мыши ставится  css код: 
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;

И какие-то данные, которые будут изменены, например:
height: 188px;
width: 188px;

Далее, после наведения мыши пишем css, с новыми значениями, например:
width: 300px;
height: 300px;

Вот, что можно получить в итоге:

girl
city
kick
plane
sea
sea
people
dog
ipad
soccer

.

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

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

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

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

| | Все эффекты css3 при наведении на картинку | На эту тему меня подбодрило несколько разных сайтов, где были приведены разные эффекты css3 при наведении на картинку. Я постарался собрать все в одно |

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

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


Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>