Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить 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%);
}

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

  1. Шикарные эффекты, опробуем обязательно

  2. merrii:

    Спасибо тебе, добрый человек :)

  3. Евгений:

    Доброго дня.
    только в 1-7 вариантах видны эффекты на демокартинках.

    1. Евгений:

      извините, не внимательно прочитал сатью. они в Мозилле не работают.

      1. admin:

        некоторые можно пофиксить, поищите в интернете, либо напишите какой именно вам нужен эффект?

  4. Спасибо. Черно-белый забираю)

  5. Увы, нет эффекта на демо картинках. Но подборка супер! И сайт шикарный! Низкий поклон!

    1. admin:

      Как нет?) или я Вас неправильно понял?

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

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

X