CSS3 implementation of Image Magnifier effects

A picture magnifier effect that is implemented with pure CSS3. The page opens with five small figures displayed on the page. When the mouse through the picture, the current picture is shown in the form of a gray background, the need for friends do not miss

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.

Code to implement:

HTML code:

<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>

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:nt H-child (1): HOVER ~: last-child:after {opacity:. 001;}. Gallery__item:nth-child (2) {margin:4.13825vmin-40.86867vmin;-WEBKIT-TRANSFO Rm: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:nt H-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:nt H-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:nt  H-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:nt H-child (5): hover ~: last-child:after {opacity:. 001;}. gallery__item:last-child {z-index:-2;}. Gallery__item:last-chi ld:after {position:absolute; top:0; right:0; bottom:0; left:0; opacity:. 999; background:dimgRey transition:opacity 2s; Content: "; }

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!