Домой / Для сайта / Галереи

Галереи

Галерея на CSS

Галерея на CSS

Здравствуйте, друзья! Сегодня я хочу показать вам пример создания галереи изображений на чистом CSS, без использования каких-либо скриптов. Реализована галерея таким образом, что при загрузке страницы мы видим галерею с изображениями размером 300х400, которые используются для предпросмотра. После клика на изображение — открывается его увеличенная копия размером 800х600. Из этого вытекает, что для создания галереи нам нужно по два изображения на один элемент галереи. ... Читать далее »

Прикольный ховер-эффект для изображения на CSS

Прикольный ховер эффект для изображения на CSS

Здравствуйте друзья! Сегодня я предлагаю вашему внимаю пример создания hover-эффекта для изображений. В данном примере при наведении курсором мышки изображение затемняется серым цветом, и при этом выплывает сверху на середину изображения иконка лупы. Изменить иконку лупы которая появляется при наведении на изображение на любую другую очень просто! Для этого необходимо в классе .gallery a:before изменить ссылку фона в свойстве background на адрес другой иконки. Для ... Читать далее »

Галерея с эффектом размытия фона (blur effect)

Галерея с эффектом цветового размытия фона (blur effect)

Пример создания галереи с очень интересным эффектом. При наведении на изображение меняется фон, в зависимости от выбранного изображения. На фоне мы видим размытое изображения из галереи, на которое мы навели курсором мышки. Если из CSS кода убрать: Мы получим не размытый, а изображение из галереи на которое мы навели мышкой, но в полном размере и без эффекта размытия. Как видите, таким ... Читать далее »

Одностраничный сайт-портфолио с помощью CSS и JS

Одностраничный сайт-портфолио с помощью CSS и JS

Предлагаю вашему вниманию пример создания портфолио (галереи) с помощью CSS и JS. В части кода ниже вы видите пример добавления книги  A Clockwork Orange. Вначале в машинописный апострофах необходимо указать ссылку на изображение книги, далее через запятую и также в апострофах указываем название книги, имя автора и описание. Для работы необходимо обязательно подключить библиотеку jQuery. Данный пример можно использовать как готовое решение для одностраничного ... Читать далее »