Pure CSS3 Realization of the creative picture Magnifier

Today to share with you a pure CSS3 implementation of the picture Magnifier effect. The page opens with five small figures displayed on the page. When the mouse passes through the picture, the current picture is displayed in the form of a gray background image. The effect is very good.

Online preview Source Download

Code to implement:

HTML code:

 <ulclass= "Gallery">        <Liclass= "Gallery__item"></Li>        <Liclass= "Gallery__item"></Li>        <Liclass= "Gallery__item"></Li>        <Liclass= "Gallery__item"></Li>        <binclass= "Gallery__item"></Li>        <Liclass= "Gallery__item"></Li></ul>

CSS code:

. 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 0.5s cubic-bezier (0.175, 0.885, 0.32, 1.275), Background-image 0.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 ("imgs/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 ("imgs/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 ("imgs/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 ("imgs/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 ("imgs/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 ("imgs/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 ("imgs/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 ("imgs/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 ("imgs/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 ("imgs/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:"'; }

Note: This article Love programming original article, reproduced please specify the original address: http://www.w2bc.com/Article/5002

Pure CSS3 Realization of the creative picture Magnifier