Эффект для картинок на сайте на чистом CSS

Сегодня мы с Вами будем делать один простой эффект для изображений. Который можно применять, например, на блоге, на главной странице, или же в презентации Ваших фотографий, галереи. В общем я думаю, что этот урок окажется полезным для Вас.

HTML

Для начала нам нужно создать HTML разметку нашей галереи с фотографиями, она довольно проста:

<section>
<ul id="gallery">
<li>
<a href="#">
<img src="#" alt="">
<p>Experimentation with color and texture.</p>
</a>
</li>
<li>
<a href="#">
<img src="#" alt="">
<p>Playing with blending modes in Photoshop.</p>
</a>
</li>
<li>
<a href="#">
<img src="#" alt="">
<p>Trying to create an 80's style of glows.</p>
</a>
</li>
<li>
<a href="#">
<img src="#" alt="">
<p>Drips created using Photoshop brushes.</p>
</a>
</li>
<li>
<a href="#">
<img src="#" alt="">
<p>Creating shapes using repetition.</p>
</a>
</li>
</ul>
</section>

<li>

Experimentation with color and texture.

</a>

</li>

<li>

Playing with blending modes in Photoshop.

</a>

</li>

<li>

Trying to create an 80's style of glows.

</a>

</li>

<li>

Drips created using Photoshop brushes.

</a>

</li>

<li>

Creating shapes using repetition.

</a>

</li>

</ul>

</section>

Как видите мы создали некий список из тегов ul и li. Затем в данные теги мы поместили изображения и ниже описания к ним. Потом мы эти тегам зададим правила в стилях. Которые тоже не слишком уж и сложные.

CSS стили

В данном случае список ul созданный нами выше с изображениями, будет иметь id — gallery. Который и будет отвечать за правильное отображение нашей галереи:

#gallery {
margin: 0;
padding: 0;
list-style: none;
}
 
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
 
#gallery li a p {
margin: 0;
padding: 5%;
font-size: 0.75em;
color: #bdc3c7
}

#gallery {

margin: 0;

padding: 0;

list-style: none;

}

#gallery li {

float: left;

width: 45%;

margin: 2.5%;

background-color: #f5f5f5;

color: #bdc3c7;

}

#gallery li a p {

margin: 0;

padding: 5%;

font-size: 0.75em;

color: #bdc3c7

}

Вот и всё. Код получился очень коротким. Ширина каждой картинки будет 45%. А так же мы тут задали выравнивание li по левому краю для того, что бы изображения шли друг за другом по горизонтали. Вот что у нас получилось:

Конечно же нам нужно сделать нашу галерею адаптивной, и в конец списка правил CSS нужно добавить следующее:

@media screen and (min-width: 480px) {
#gallery li {
 
width: 28.3333%;
}
 
#gallery li:nth-child(4n) {
clear: left;
}
 
}

@media screen and (min-width: 480px) {

#gallery li {

width: 28.3333%;

}

#gallery li:nth-child(4n) {

clear: left;

}

Ну а сейчас мы будем добавлять несколько не сложных CSS правил, чтобы получился красивый эффект для изображений, который будет срабатывать при наведении на них. Делать мы это будем на чистом CSS3 без использования каких либо скриптов, с помощью CSS transition и CSS transform:

#gallery li {
perspective: 250px;
}
 
#gallery a img {
transition: 100ms;
transform: translateZ(0px);
box-shadow: 0px 0px 0px rgba(0,0,0,0);
}
 
#gallery a img:hover {
transform: translateZ(25px) rotate(3deg);
box-shadow: 0px 0px 10px rgba(0,0,0,0.8);
}

#gallery li {

perspective: 250px;

}

#gallery a img {

transition: 100ms;

transform: translateZ(0px);

box-shadow: 0px 0px 0px rgba(0,0,0,0);

}

#gallery a img:hover {

transform: translateZ(25px) rotate(3deg);

box-shadow: 0px 0px 10px rgba(0,0,0,0.8);

}

Всё. Правил действительно мало. Transition в данном случай анимирует наши изображения, а transform немного поворачивает изображения, и добавляет тень при наведении.

Вот и всё, друзья. Этот эффект для изображений действительно не трудно делать, а можно использовать практически везде где только придумать можно. Тем более это, конечно же, не конечный вариант. Вы можете изменить несколько значений, и настроить всё по Вашему желания. Так же мне интересно было бы узнать понравился ли Вам данный эффект?

Источник: greatdes.ru

Эффект для картинок на сайте на чистом CSS