CSS3 to achieve brilliant image switching effects

　　Visit blog to see a very good picture of the switch effect, with CSS3 do, oneself also tried a bit. The idea is ingenious and not difficult to achieve. A picture is divided into four parts, which are absolutely positioned so that each Li displays a portion of the picture, thus creating a complete picture. Animate four parts to show the second picture, and the second image uses the Transform property to zoom in and out of the restore process first.

Effect Preview

Attached Code snippet:

<Divclass= "Grid-box">    <ulclass= "Pic1">        <Li>            <imgsrc= "Image/a.jpg">        </Li>        <Li>            <imgsrc= "Image/a.jpg">        </Li>        <Li>            <imgsrc= "Image/a.jpg">        </Li>        <Li>            <imgsrc= "Image/a.jpg">        </Li>    </ul>    <spanclass= "Pic2"></span></Div>

*{box-sizing:Border-box;margin:0;padding:0;}ul{List-style:None;}. Grid-box{width:280px;Height:220px;Overflow:Hidden;Border:10px Solid Gray;Border-radius:10px;margin:20px Auto;position:relative;}. Pic1,. Pic2{width:260px;Height:200px;position:Absolute; Left:0;Top:0;cursor:Pointer;}. Pic1 Li{width:50%;Height:50%;Overflow:Hidden;float: Left;position:relative;}/*pic1 Stitching Pictures*/. Pic1 li img{position:Absolute;width:260px;Height:200px;}. Grid-box:hover. Pic2,. Pic2,. Pic1 img{transition:All . 7s Ease;}. Pic1 li:nth-of-type (1) img{ Left:0;Top:0;}. Pic1 li:nth-of-type (2) img{ Left:-130px;}. Pic1 li:nth-of-type (3) img{ Left:0;Top:-100px;}. Pic1 li:nth-of-type (4) img{ Left:-130px;Top:-100px;}/*pic1 Sliding Pictures*/. Pic1:hover li:nth-of-type (1) img{/*to decline*/Top:100px;}. Pic1:hover li:nth-of-type (2) img{/*Slide Left*/ Left:-260px;}. Pic1:hover li:nth-of-type (3) img{/*Slide Right*/ Left:130px;}. Pic1:hover li:nth-of-type (4) img{/*Slide Up*/Top:-200px;}/*Amplification of Pic2*/. Pic2{Transform:Scale (1.5);background:URL ("image/b.jpg");background-size:cover;Z-index:-1;}. Grid-box:hover. Pic2{Transform:Scale (1);}

CSS3 to achieve brilliant image switching effects