Код
<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"/>
Пример