+7 (911) 913-40---
menu
person
[ Обновленные темы · Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Окно (lightbox) на CSS
artnovДата: Понедельник, 23.06.2014, 20:21 | Сообщение # 1
Начальник сайта
Группа: Администраторы
Сообщений: 151
Награды: 0
Репутация: 0
Статус: Offline

Код
<style>

img.zoom {
   -moz-user-select: none; user-select: none;
}
img.zoom:hover {
   display: block;
   position: fixed;
   z-index: 10;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
   width: auto;
   height: auto;
   max-width: 99%;
   max-height: 99%;
   border: solid rgba(210,210,210,.4);
   border-width: 100vh 100vw;
   cursor: zoom-out;
}
:not(:active) > img.zoom:not(:hover), img.zoom:active {
   pointer-events: none;
}
/* не идеально: transition-property не поддерживает свойство position. В результате, если переключить вкладку браузера, то картинка становится вновь маленькой. */

</style>
<img src="http://www.novickiy.ru/_ph/8/502558324.jpg?1403539083" alt="" width="150" class="zoom"/>
<img src="http://www.novickiy.ru/_ph/8/998905027.jpg?1403540134" alt="" width="150" class="zoom"/>
<img src="http://www.novickiy.ru/_ph/8/621071167.jpg?1403539773" alt="" width="150" class="zoom"/><br>
<img src="http://www.novickiy.ru/_ph/8/504650448.jpg?1403539725" alt="" width="150" class="zoom"/>
<img src="http://www.novickiy.ru/_ph/8/36727807.jpg?1403539863" alt="" width="150" class="zoom"/>
<img src="http://www.novickiy.ru/_ph/8/769888652.jpg?1403540043" alt="" width="150" class="zoom"/>
Пример


Artnov
 
  • Страница 1 из 1
  • 1
Поиск: