наверх





Создать обычную галерею - слишком просто. Давайте сделаем её более "живой" и интересной, используя свойства CSS3! К тому же, не применяя к нему никаких других JS и JQeury.


В этом примере я покажу, как сделать красочную и оригинальную галерею, используя лишь HTML и CSS3 свойства.

Главной особенностью в данной галерее является увеличивающиеся изображения, при клике на них.
На самом деле сделать это очень просто, нужно лишь использовать один HTML атрибут и один CSS псевдокласс.

HTML


<div class="gallery">
<a tabindex="1"><img src="img1.jpg"></a>
<a tabindex="2"><img src="img2.jpg"></a>
<a tabindex="3"><img src="img3.jpg"></a>
</div>


Да, что бы при клике на изображение оно увеличилось, нужно добавить атрибут tabindex, в котором может находится любое целое число, начиная с нуля. К тому же, при нажатии на кнопку Tab, автоматически будет увеличено следующие изображение.

CSS



Первым делом стоит оформить сам тег <img>. Здесь можно сразу добавить прозрачности, плавности, тени, а так же отступы:

.gallery a img{    
    /* округления старт */
    -webkit-border-radius: 25px;
    -moz-border-radius:  25px;
    border-radius:  25px;
    /* округления конец */
    
    /* transition старт */
    -webkit-transition:All 1s ease;
    -moz-transition:All 1s ease;
    -o-transition:All 1s ease;
    transition: all 1.0s ease;
    /* transition конец */
    
    /* Тень старт */
    -webkit-box-shadow: 0px 2px 4px 1px #DFDFDF;
    -moz-box-shadow: 0px 2px 4px 1px #DFDFDF;
    box-shadow: 0px 2px 4px 1px #DFDFDF; 
    /* Тень конец */
    
    /* Прозрачнсоть старт */
    -moz-opacity: 0.70;
    opacity: 0.70;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
    /* Прозрачнсоть конец */
    
    margin-right:5px;     /* Отступ справа */
    padding:10px; /* Внутренние отступы */
    display:inline-block; /* отображение */
    height:150px; /* Высота */
}


Теперь стоит убрать эффект прозрачности при наведении, а не при клике:

.gallery a img:hover{
    -moz-opacity: 1;
    opacity: 1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
}


Осталось лишь сделать, чтобы при клике увеличилось изображение. Для этого будем использовать псевдокласс. Но какой? :hover, :active, :link здесь явно не подойдут... Для этого случая подойдет псевдокласс :focus, так как он срабатывает как раз при клике на объект и исчезает, когда происходит другой клик.

.gallery a:focus img{
    position: relative;  /* Позиционирование */
    height:300px; /* Высота */
    cursor: pointer;    /* Вид курсора */
    
    /* transition старт */
    -webkit-transition:All 1s ease;
    -moz-transition:All 1s ease;
    -o-transition:All 1s ease;
    transition: all 1.0s ease;
    /* transition конец */
    
    /* Тень старт */
    -webkit-box-shadow: 0px 4px 4px 1px #DFDFDF;
    -moz-box-shadow: 0px 4px 4px 1px #DFDFDF;
    box-shadow: 0px 4px 4px 1px #DFDFDF;
    /* Тень конец */    
}


Практически готово. Но теперь, при клике на изображение, около него образуется желтая линия, например в браузере Google Chrome. Это легко исправляется добавлением свойств с обводкой с нулевыми значениями:

.gallery a{
    outline:0; border:0;
}





Просмотр демо-варианта


Поделиться
Text-shadow генератор
Занимаетесь веб-разработкой? Полноценный кроссбраузерный text-shadow генератор с поддержкой нескольких теней.


Комментарии — 4


Edline 18 марта, 21:08 ответить #

Извините за глупый вопрос ! Как сделать что бы фото при увеличении появлялось по центру и не двигало соседнее. Подскажите пожалуйста ;)

lolik15 09 июня, 18:57 ответить #

Извините,можете подсказать,а как сделать так чтобы при создании галереи фотографии располагались горизонтально?

Grinch 06 марта, 18:59 ответить #

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

zzibn 17 апреля, 17:12 ответить #

Спасибо большое!! Но..
Может подскажете как можно сделать чтобы превью оставались сверху, а фото увеличивалось ниже линейки с превьюшками. Понимаю что нужно менять:
.gallery a:focus img{
position:
..но самой сделать не получается ((
Заранее признательна!

У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.