Home > Developer > Web Develop
/ * Code Let's see * *
<style> Body{background:#ccc; }#box{font-family:"Microsoft Jas Black";font-size:30px;text-align:Center;width:800px;Height:400px;margin:100px Auto;position:relative;Overflow:Hidden;Border:20px Solid #fff; }#box Div{-webkit-transition:All 0.5s;-ms-transition:All 0.5s;-moz-transition:All 0.5s;-o-transition:All 0.5s;transition:All 0.5s;position:Absolute;width:25%;Height:400px;Z-index:0; }#one{background:URL (1.jpg); Left:0%; }#one: Hover{Z-index:999;width:100%; }#two{ Left:25%;background:URL (2.jpg);Box-shadow:-10px 0px 20px #000;-webkit-box-shadow:-10px 0px 20px #000;-moz-box-shadow:-10px 0px 20px #000;-o-box-shadow:-10px 0px 20px #000;-ms-box-shadow:-10px 0px 20px #000; }#two: Hover{ Left:0%;width:100%;Z-index:999; }#three{ Left:50%;background:URL (3.jpg);Box-shadow:-10px 0px 20px #000;-webkit-box-shadow:-10px 0px 20px #000;-moz-box-shadow:-10px 0px 20px #000;-o-box-shadow:-10px 0px 20px #000;-ms-box-shadow:-10px 0px 20px #000; }#three: Hover{ Left:0%;width:100%;Z-index:999; }#four{ Left:75%;background:URL (4.jpg);Box-shadow:-10px 0px 20px #000;-webkit-box-shadow:-10px 0px 20px #000;-moz-box-shadow:-10px 0px 20px #000;-o-box-shadow:-10px 0px 20px #000;-ms-box-shadow:-10px 0px 20px #000; }#four: Hover{ Left:0%;width:100%;Z-index:999; }P{Color:#fff;transition:All 1s 0.5s;-moz-transition:All 1s 0.5s;-webkit-transition:All 1s 0.5s;-o-transition:All 1s 0.5s;-ms-transition:All 1s 0.5s; }#box P{position:Absolute;width:100%;Height:50px;background:#000000;Opacity:0.5;Filter:Alpha (OPACITY:50);Top:100%; }#one: hover #oone{Top:80%; }#two: hover #ttwo{Top:80%; }#three: hover #tthree{Top:80%; }#four: hover #ffour{Top:80%; }</style>
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8"> <title></title> </Head> <Body> <DivID= "box"> <DivID= "One"> <PID= "Oone">First picture</P> </Div> <DivID= "both"><PID= "Ttwo">Second picture</P></Div> <DivID= "three"><PID= "Tthree">The third picture</P></Div> <DivID= "Four"><PID= "Ffour">Diagram Four</P></Div> </Div> </Body></HTML>
CSS3 Imitation accordion effect! Look for the CSS3 novice!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
