Source:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<TITLE>CSS3 pseudo Magnifier (Image zoom animation) Effect </title>
<style>
. Gallery{list-style:none}
. gallery:before,.gallery__item:last-child{position:fixed;top:50%;left:50%;margin:-31.25em;width:62.5em;height : 62.5em}
. Gallery:before{z-index:-1;border-radius:50%;content: '; Box-shadow:inset 0 0 5em dimgrey,0 0 0 50vw Dimgrey}
. Gallery__item{background-blend-mode:luminosity;transition:-webkit-transform. 5s Cubic-bezier ( 0.175,0.885,0.32,1.275), Background-image. 5s}
. Gallery__item:not (: last-child) {position:absolute;top:50%;left:50%;width:32vmin;height:32vmin;border-radius:50 %;box-shadow:0 0.5em White}
. Gallery__item:nth-child (1) {Margin:13.87457vmin-4.53223vmin;-webkit-transform:scale (0.5); Background:url (" Images/1.jpg ") 50% 50% fixed WhiteSmoke}
. Gallery__item:nth-child (1): Hover{-webkit-transform:scale (1); Background-blend-mode:normal;cursor:pointer}
. Gallery__item:nth-child (1): Hover ~:last-child{background:url ("images/1.jpg") 50% 50% fixed Dimgray}
. Gallery__item:nth-child (1): Hover ~:last-child:after{opacity:.001}
. Gallery__item:nth-child (2) {Margin:4.13825vmin-40.86867vmin;-webkit-transform:scale (0.5); Background:url (" Images/2.jpg ") 50% 50% fixed WhiteSmoke}
. Gallery__item:nth-child (2): Hover{-webkit-transform:scale (1); Background-blend-mode:normal;cursor:pointer}
. Gallery__item:nth-child (2): Hover ~:last-child{background:url ("images/2.jpg") 50% 50% fixed Dimgray}
. Gallery__item:nth-child (2): Hover ~:last-child:after{opacity:.001}
. Gallery__item:nth-child (3) {Margin:-33.42845vmin-42.83746vmin;-webkit-transform:scale (0.5); Background:url (" Images/3.jpg ") 50% 50% fixed WhiteSmoke}
. Gallery__item:nth-child (3): Hover{-webkit-transform:scale (1); Background-blend-mode:normal;cursor:pointer}
. Gallery__item:nth-child (3): Hover ~:last-child{background:url ("images/3.jpg") 50% 50% fixed Dimgray}
. Gallery__item:nth-child (3): Hover ~:last-child:after{opacity:.001}
. Gallery__item:nth-child (4) {Margin:-46.90963vmin-7.71779vmin;-webkit-transform:scale (0.5); Background:url (" Images/4.jpg ") 50% 50% fixed WhiteSmoke}
. Gallery__item:nth-child (4): Hover{-webkit-transform:scale (1); Background-blend-mode:normal;cursor:pointer}
. Gallery__item:nth-child (4): Hover ~:last-child{background:url ("images/4.jpg") 50% 50% fixed Dimgray}
. Gallery__item:nth-child (4): Hover ~:last-child:after{opacity:.001}
. Gallery__item:nth-child (5) {margin:-17.67475vmin 15.95615vmin;-webkit-transform:scale (0.5); Background:url (" Images/5.jpg ") 50% 50% fixed WhiteSmoke}
. Gallery__item:nth-child (5): Hover{-webkit-transform:scale (1); Background-blend-mode:normal;cursor:pointer}
. Gallery__item:nth-child (5): Hover ~:last-child{background:url ("images/5.jpg") 50% 50% fixed Dimgray}
. Gallery__item:nth-child (5): Hover ~:last-child:after{opacity:.001}
. gallery__item:last-child{z-index:-2}
. Gallery__item:last-child:after{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.999;background: Dimgrey;transition:opacity 2s;content: '}
</style>
<body>
<!--code section begin-->
<ul class= "Gallery" >
<li class= "Gallery__item" ></li>
<li class= "Gallery__item" ></li>
<li class= "Gallery__item" ></li>
<li class= "Gallery__item" ></li>
<li class= "Gallery__item" ></li>
<li class= "Gallery__item" ></li>
</ul>
<div style= "Text-align:center;" ></div>
<!--code section end-->
</body>
CSS3 pseudo magnifying glass (image magnification animation) effect (mouse over the circular area to enlarge the picture)