<style>
img[tabindex="0"] {
cursor: zoom-in;
}
img[tabindex="0"]:focus {
position: fixed;
z-index: 10;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: auto;
height: auto;
max-width: 99%;
max-height: 99%;
margin: auto;
box-shadow: 0 0 20px #000, 0 0 0 1000px rgba(210,210,210,.4);
}
img[tabindex="0"]:focus, /* убрать строку, если не нужно, чтобы при клике на увеличенное фото, оно возвращалось в исходное состояние */
img[tabindex="0"]:focus ~ * {
pointer-events: none;
cursor: zoom-out;
}
</style>
<!-- размер фотографии, видимой на HTML-странице делается меньше, чем он есть на самом деле. При щелчке по картинке фото принимает свой настоящий вид -->
<img src="адрес" alt="" width="150" tabindex="0"/>
<img src="адрес" alt="" width="400" tabindex="0"/>
Лайтбокс, увеличивающаяся картинка при клике (lightbox) на чистом CSS
Без использования Java, JQuery, Ajax и прочих костылей...
Пример работы в правом верхнем углу "Памятка заказчику"
- Комментарии
Загрузка комментариев...