Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить HTML верстку, или хотите задать мне вопрос, заполните форму справа

X

15 Эффектов для изображений с помощью css3

С появлением css3 верстка приобрела новые интересные возможности. Я расскажу, а точнее покажу вам эффекты для изображений.

Перед тем как приступить, сначала пишем основные стили для всех блоков с изображениями нашей страницы.

.pic {
height: 300px;
width: 300px;
overflow: hidden;
margin: 20px;
border: 10px
solid #ccc;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
float: left; }.pic img {
margin: 0;}.pic:hover {
cursor: pointer; }

А сейчас рассмотрим каждый эффект по порядку:

1. Увеличение
girl
При наведении на блок, изображение увеличивается не выходя за рамки самого блока.

HTML код:

<div class=»grow pic»>
<img src=»http://lorempixel.com/400/400/people/9″ alt=»portrait»>
</div>

 

CSS код:

/*GROW*/
.grow 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;
}.grow img:hover {
width: 400px;
height: 400px;
}

2. Уменьшение

city

При наведении на блок, изображение уменьшается до размеров 300px x 300px.

HTML код:

<div class=»shrink pic»>
<img src=»http://lorempixel.com/400/400/nightlife/4″ alt=»city»>
</div>

CSS код:

/*SHRINK*/
.shrink 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;
}.shrink img:hover {
width: 300px;
height: 300px;
}

3. Горизонтальное смещение

kick

Представленный пример показывает что изображение можно не только масштабировать но и смещать при наведении.

HTML код:

<div class=»sidepan pic»>
<img src=»http://lorempixel.com/600/300/sports/8″ alt=»kick»>
</div>

CSS код:

/*SIDEPAN*/
.sidepan 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;
}.sidepan img:hover {
margin-left: -200px;
}

4. Вертикальное смещение

climb

Тот же эффект что и в предыдущим примере но изображение сдвигается по вертикали.

HTML код:

<div class=»vertpan pic»>
<img src=»http://lorempixel.com/300/600/sports/5″ alt=»climb»>
</div>

CSS код:

/*VERTPAN*/
.vertpan img {
margin-top: 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;
}.vertpan img:hover {
margin-top: -200px;
}

5. Наклон

Красивый css эффект, который поворачивает изображение при наведении курсора.

HTML код:

<div class=»tilt pic»>
<img src=»http://lorempixel.com/300/300/transport/5″ alt=»car»>
</div>

CSS код:

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

6. Поворот

Поворот изображения с эффектом скругления углов. Смотрится эффектно.

HTML код:

<div class=»morph pic»>
<img src=»http://lorempixel.com/300/300/nature/5″ alt=»beach»>
</div>

CSS код:

/*MORPH*/
.morph 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;
}.morph img:hover {
border-radius: 50%;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

7. Фокусировка

Эффект который похожий на предыдущий но без вращения, а только с эффектом скругления.

HTML код:

<div class=»focus pic»>
<img src=»http://lorempixel.com/300/300/sports/1″ alt=»cricket»>
</div>

CSS код:

/*FOCUS*/
.focus 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;
}.focus img:hover {
border: 70px solid #000;
border-radius: 50%;
}

Фильтры изображений (для браузеров Chrome и Safari)

 

8. Размытие

plane

CSS3 Эффект размытия изображения.

HTML код:

<div class=»blur pic»>
<img src=»http://lorempixel.com/300/300/transport/2″ alt=»plane»>
</div>

CSS код:

/*BLUR*/
.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(5px);
}
9. Черно-белое изображение
sea

Этот фильтр помогает сделать с цветного изображения — черно-белое или наоборот.

HTML код:

<div class=»bw pic»>
<img src=»http://lorempixel.com/300/300/nature/2″ alt=»sea»>
</div>

CSS код:

/*B&W*/
.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%);
}
10. Осветление
sea

Добавляем или убираем яркость изображения.

HTML код:

<div class=»brighten pic»>
<img src=»http://lorempixel.com/300/300/technics/2″ alt=»sea»>
</div>

CSS код:

/*DARKEN*/
.brighten img {
-webkit-filter: brightness(0%);
-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(100%);
}
11. Сепия
people

Интересный фильтр, который делает из простого изображения эффект сепии.

HTML код:

<div class=»sepia pic»>
<img src=»http://lorempixel.com/output/people-q-c-300-300-4.jpg» alt=»people»>
</div>

CSS код:

/*SEPIA*/
.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%);
}
12. Контрастность
dog

Мой любимый и самый привлекательный с эффектов. При наведении цвета становятся яркими и насыщенными.

HTML код:

<div class=»contrast pic»>
<img src=»http://lorempixel.com/output/animals-q-c-300-300-9.jpg» alt=»dog»>
</div>

CSS код:

/*CONTRAST*/
.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%);
}
13. Оттенок изображения
train

При наведении курсора, изображение изменяет цветовую гамму.

HTML код:

<div class=»hue-rotate pic»>
<img src=»http://lorempixel.com/output/transport-q-c-300-300-9.jpg» alt=»train»>
</div>

CSS код:

/*HUE_ROTATE*/
.hue-rotate 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;
}.hue-rotate img:hover {
-webkit-filter: hue-rotate(65deg);
}
14. Инверсия
ipad

Эффект инверсии цветов.

HTML код:

<div class=»invert pic»>
<img src=»http://lorempixel.com/output/technics-q-c-300-300-1.jpg» alt=»dog»>
</div>

CSS код:

/*INVERT*/
.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%);
}
15. Прозрачность
soccer

Прозрачность изображения при наведении.

HTML код:

<div class=»opacity pic»>
<img src=»http://lorempixel.com/output/sports-q-c-300-300-6.jpg» alt=»soccer»>
</div>

CSS код:

/*OPACITY*/
.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-filter: opacity(25%);
}