|
|
Модератор форума: dotbot |
Сообщество uCoz » Архивариус » Корзина » Галерея на CSS (Подскажите ?) |
Галерея на CSS (Подскажите ?) |
Здравствуйте. Простая галерея только на css, но к сожалению нет функции подписи картинкам. Нужно что бы при увеличении картинки, внизу (под ней) был текст (тот который указан в html <a href=" /image-05.jpg " class=" lightbox" title="Image 05"> <img src=" /image-05_th.jpg " alt="Image 05" /></a> ) . Будьте добры подскажите как сделать что бы отображались подписи к картинкам???
Код /* CSS */ /************************************* * Базовые стили lightbox. * по умолчанию 'opacity' в значении '0'. */ a img { border: none; /* убираем рамку */ } .lightbox { /** определяем базовый стиль lightbox */ position: fixed; overflow: hidden; z-index: 9999; width: 0; height: 0; text-align: center; top: 0; left: 0; background: rgba(0,0,0,0.8); } .lightbox img { /** базовый стиль изображений lightbox*/ max-width: 90%; max-height: 80%; margin-top: 3%; /** полная прозрачность изначально */ opacity: 0; border: 1px solid #4D4D4D; /** тени у картинок - это по желанию */ -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8); -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8); /* трансформация прозрачности при открытии */ -webkit-transition: opacity 500ms ease-in; -moz-transition: opacity 500ms ease-in; transition: opacity 500ms ease-in; } .lightbox:target { /** активируем lightbox при нажатии */ width: auto; height: auto; bottom: 0; right: 0; /** удаляем контур по умолчанию */ outline: none; } .lightbox:target img { /** делаем элемент непрозрачным */ opacity: 1; } /** стиль миниатюр для демо-страницы */ .thumb img{ width: 45%; margin:2%; box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.6); -moz-box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.6); } Сообщение отредактировал FESALI - Вторник, 16 Сен 2014, 13:21:49
|
|
| |||
| |||