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


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

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

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

HTML

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

 

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

CSS стили

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

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

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

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

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

 

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

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

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

Previous Плавное увеличене изображения на CSS
Next Кнопка для сайта с дополнительной информацией

Suggested Posts

Модуль вывода атрибутов для товара группами

10 бесплатных шрифтов с поддержкой кириллицы

Модуль оплаты Интеркасса-2.0

JS для начинающих. Урок 1.18: Использование регулярных выражений

Адаптивная сетка иконок

10 советов и техник HTML5(Часть1)