http://shpargalkablog.ru/2011/02/modalnoe-okno-css.html

HTML

<img class="zoom" src="https://gif" width="150" alt=""/> <img class="zoom" src="http://jpg" width="200" alt=""/>

CSS

<style type="text/css"><!--
img.zoom {
 -moz-user-select: none; user-select: none;
 border-radius: 15px/25px; border: 1px dotted #5e6369;
 box-shadow: #9BA1A1 3px 3px 9px;
}
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>