CSS some basic effects

1. Rotate

. Center>.bj>.div1>ul>li>.img1:hover{Transform:Rotate ( -360deg);transition:1s}/*Rotate*/. Center>.bj>.div1>ul>li>.img2:hover{Transform:Rotatey (360deg);transition:1.5s}/*y-Axis rotation*/. Center>.bj>.div1>ul>li>.img3:hover{Transform:Rotate (360deg);transition:1s}

2. Zooming

. Center>.bj>.div2>.d2>ul>li>div{width:260px;Height:180px;Overflow:Hidden}/*picture parent element set overflow hidden*/. Center>.bj>.div2>.d2>ul>li>div>img{width:260px;transition:1s;}/*Set Picture transition time*/. Center>.bj>.div2>.d2>ul>li>div:hover img{Transform:Scale (1.2,1.2);}/*Click Zoom, here is zoom 1.2 times times, move the mouse back to the original*/

3. Masking Layer Overlay Picture

. Foot>.bj>.d2>ul>.li2{position:Absolute; Left:310px;Top:0;transition:3s;}/*Sub-positioning absolute + transition time*/. Foot>.bj>.d2>ul>.li4{position:Absolute; Left:950px;Top:0;transition:3s;}. Foot>.bj>.d2>ul>.li1:hover +.li2{ Left:20px;background:papayawhip;Opacity:0.6}/*mouse across the li1,li2 changes*/. Foot>.bj>.d2>ul>.li3:hover +.li4{ Left:660px;background:papayawhip;Opacity:0.6}

4. Mask layer is hidden above img

< Li ><  src= "images/center/index-01.jpg"/>                       <Div  ><src= "Images/center/zoom.png"/></Div >                   </ Li >

. Foot>.bj>.d2>.u1>li{float: Left;List-style:None;Margin-left:30px;width:260px;Height:260px;position:relative;Overflow:Hidden}/*overflow-hide, parent-relative-positioning*/. Foot>.bj>.d2>.u1>li>img{width:260px;Height:260px;}. Foot>.bj>.d2>.u1>li>div{width:260px;Height:260px;background:Cyan;Opacity:0.3;position:Absolute; Left:0;Top:-260px;transition:0.5s;}/*Sub-absolute positioning, transparency*/. Foot>.bj>.d2>.u1>li>div>img{Margin-top:120px;Margin-left:115px;}. Foot>.bj>.d2>.u1>li:hover Div{Top:0;}/ *top value is 0. direct positioning down *   /

5. Masking layer Top-down effect

    <DivID= "Tu">        <Divclass= "Div1">Scenery</Div>        <imgsrc= "Images/center/index-08.jpg"/>        <Divclass= "Div2">Scenery</Div>    </Div>

. Foot>.bj>.d2>ul>li>div{width:260px;Height:200px;position:relative;Overflow:Hidden}. Foot>.bj>.d2>ul>li>div>div{width:260px;Height:100px;background:Cyan;Opacity:0.4;text-align:Center;Line-height:100px;}. Foot>.bj>.d2>ul>li>div>.div1{position:Absolute; Left:0;Top:-100px;Z-index:5;transition:1s;}. Foot>.bj>.d2>ul>li>div>.div2{position:Absolute; Left:0;Top:200px;Z-index:5;transition:1s;}. Foot>.bj>.d2>ul>li>div:hover. Div1{Top:0;}. Foot>.bj>.d2>ul>li>div:hover. Div2{Top:100px;}

CSS some basic effects