Все эффекты css3 при наведении на картинку
X
Заказать сайт
Заказать сайт

Все эффекты 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>