HTML
<div class="container"> <div class="bg-items"> <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (1).jpg');"> <div class="one"></div> <div class="details"> <h3>#1</h3> <p>this is a description for your picture in the your gallery.</p> <h6>time & date</h6> </div> </div> </div> <div class="bg-items"> <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (2).jpg');"> <div class="two"></div> <div class="details"> <h3>#2</h3> <p>this is a description for your picture in the your gallery.</p> <h6>time & date</h6> </div> </div> </div> <div class="bg-items"> <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (3).jpg');"> <div class="three"></div> <div class="details"> <h3>#3</h3> <p>this is a description for your picture in the your gallery.</p> <h6>time & date</h6> </div> </div> </div> <div class="bg-items"> <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (4).jpg');"> <div class="four"></div> <div class="details"> <h3>#4</h3> <p>this is a description for your picture in the your gallery.</p> <h6>time & date</h6> </div> </div> </div> <div class="bg-items"> <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (5).jpg');"> <div class="tl5"></div> <div class="br5"></div> <div class="details"> <h3>#5</h3> <p>this is a description for your picture in the your gallery.</p> <h6>time & date</h6> </div> </div> </div> <div class="bg-items"> <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (6).jpg');"> <div class="tl6"></div> <div class="tr6"></div> <div class="bl6"></div> <div class="br6"></div> <div class="details"> <h3>#6</h3> <p>this is a description for your picture in the your gallery.</p> <h6>time & date</h6> </div> </div> </div> <div class="bg-items"> <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (7).jpg');"> <div class="seven"></div> <div class="details"> <h3>#7</h3> <p>this is a description for your picture in the your gallery.</p> <h6>time & date</h6> </div> </div> </div> <div class="bg-items"> <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (8).jpg');"> <div class="eight"></div> <div class="details"> <h3>#8</h3> <p>this is a description for your picture in the your gallery.</p> <h6>time & date</h6> </div> </div> </div> <div class="bg-items"> <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (9).jpg');"> <div class="nine"></div> <div class="details"> <h3>#9</h3> <p>this is a description for your picture in the your gallery.</p> <h6>time & date</h6> </div> </div> </div> <div class="bg-items"> <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (10).jpg');"> <div class="ten i"></div> <div class="ten ii"></div> <div class="ten iii"></div> <div class="ten iv"></div> <div class="details"> <h3>#10</h3> <p>this is a description for your picture in the your gallery.</p> <h6>time & date</h6> </div> </div> </div> <div class="bg-items"> <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (11).jpg');"> <div class="eleven i"></div> <div class="eleven ii"></div> <div class="eleven iii"></div> <div class="eleven iv"></div> <div class="details"> <h3>#11</h3> <p>this is a description for your picture in the your gallery.</p> <h6>time & date</h6> </div> </div> </div> <div class="bg-items"> <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (12).jpg');"> <div class="twelve i"></div> <div class="twelve ii"></div> <div class="twelve iii"></div> <div class="twelve iv"></div> <div class="details"> <h3>#12</h3> <p>this is a description for your picture in the your gallery.</p> <h6>time & date</h6> </div> </div> </div> <div class="bg-items"> <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (13).jpg');"> <div class="thirteen-l"></div> <div class="thirteen-r"></div> <div class="details"> <h3>#13</h3> <p>this is a description for your picture in the your gallery.</p> <h6>time & date</h6> </div> </div> </div> <div class="bg-items"> <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (14).jpg');"> <div class="fourteen-l"></div> <div class="fourteen-r"></div> <div class="details"> <h3>#14</h3> <p>this is a description for your picture in the your gallery.</p> <h6>time & date</h6> </div> </div> </div> <div class="bg-items"> <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (15).jpg');"> <div class="t"></div> <div class="r"></div> <div class="b"></div> <div class="l"></div> <div class="details"> <h3>#15</h3> <p>this is a description for your picture in the your gallery.</p> <h6>time & date</h6> </div> </div> </div> </div>
CSS
body { background-color: #E43; } .container { width : 960px; margin : 0 auto; } .container:after{ clear : both; display : table; content : ''; } .bg-items { padding: 20px; width : 240px; height : 160px; margin : 20px; background-color: white; float : left; cursor : pointer; box-shadow : 3px 3px 5px 0px rgba(0,0,0,0.5); } .items { width : 240px; height : 160px; position: relative; overflow: hidden; background-color: #102B46; } .details { background-color : rgba(0,0,0,0.5); width : 220px; height : 140px; padding : 10px; top : 0; left: 0; font-family : georgia; color : #fff; opacity : 0; transition : all .8s; } .details h3 { margin-bottom : 20px; } .details h6 { text-align : right; margin-top : 40px; } .details p { font-size : 14px; font-style: italic; text-align: center; } .items:hover .details { opacity : 1; transition : all .2s .3s; } .items div { position : absolute; } /* one */ .one { left : 100%; bottom : 100%; width : inherit; height: inherit; background-color : #e43; transition : all .3s; } .items:hover .one { transition : all .3s; left : 0; bottom : 0; } /* two */ .two { width : inherit; height: inherit; background-color : #e43; transition : all .3s; left : 0; bottom : 100%; } .items:hover .two { transform : rotate(180deg); left : 0; bottom : 0; transition : all .3s; } /* three */ .three { left : 0; top : 0; width : inherit; height: inherit; background-color : #e43; transition : all .3s; transform: scale(0,0); } .items:hover .three { left : 0; top : 0; transform : scale(1,1); transition : all .3s; } /* four */ .four { width : inherit; height: inherit; background-color : #e43; transition : all .3s; left : 0; top : 0; transform: scale(0,0) rotate(0deg); } .items:hover .four { left : 0; top : 0; transform: scale(1,1) rotate(1080deg); transition : all .3s; } /* five */ .tl5 { border-top : 161px solid #e43; border-right : 241px solid transparent; top : -160px; left : -240px; transition : all .3s; } .br5 { border-bottom : 161px solid #e43; border-left : 241px solid transparent; bottom : -160px; right : -240px; transition : all .3s; } .items:hover .tl5 { top : 0; left : 0; transition : all .3s; } .items:hover .br5 { bottom : 0; right : 0; transition : all .3s; } /* six */ .tl6 { width : 120px; height : 80px; background-color: #e43; top : -80px; left : -240px; transition : all .3s; } .tr6 { width : 120px; height : 80px; background-color: #e43; top : -80px; right : -240px; transition : all .3s; } .br6 { width : 120px; height : 80px; background-color: #e43; bottom: -80px; right : -240px; transition : all .3s; } .bl6 { width : 120px; height : 80px; background-color: #e43; bottom : -80px; left : -240px; transition : all .3s; } .items:hover .tl6 { top : 0; left : 0; transition : all .3s; } .items:hover .tr6 { top : 0; right : 0; transition : all .3s; } .items:hover .br6 { bottom : 0; right : 0; transition : all .3s; } .items:hover .bl6 { bottom : 0; left : 0; transition : all .3s; } /* seven */ .seven { width : 240px; height : 160px; background-color : #e43; opacity : 0; transition : all .3s; } .items:hover .seven { opacity : 1; transition : all .3s; } /* eight */ .eight { top : 30%; left : 10%; border-right : 100px solid transparent; border-bottom : 70px solid #e43; border-left : 100px solid transparent; transform: rotate(35deg) scale(0,0); transition : all .6s; } .eight:before { border-bottom: 80px solid #e43; border-left : 30px solid transparent; border-right : 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; content: ''; transform: rotate(-35deg); } .eight:after { position: absolute; display: block; color: #e43; top: 3px; left: -105px; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid #e43; border-left: 100px solid transparent; transform: rotate(-70deg); content: ''; } .items:hover .eight { transform: rotate(35deg) scale(3.5,3.5); transition : all .6s; } /* nine */ .nine { width : 0; height: 0; top : 50%; left : 50%; background-color: #e43; border-radius : 50%; transition : all .3s; } .items:hover .nine { width : 340px; height: 260px; top : -50px; left : -50px; transition : all .6s; } /* ten */ .ten { width : inherit; height : 40px; background-color: #e43; left : 100%; } .ten.i { top : 0; transition : all .2s; } .ten.ii { top : 40px; transition : all .4s; } .ten.iii { top : 80px; transition : all .6s; } .ten.iv { top : 120px; transition : all .8s; } .items:hover .i { left : 0; transition : all .2s; } .items:hover .ii { left : 0; transition : all .4s; } .items:hover .iii { left : 0; transition : all .6s; } .items:hover .iv { left : 0; transition : all .8s; } /* eleven */ .eleven { width : inherit; height : 40px; background-color: #e43; transition : all .3s; } .eleven.i { top : 0; left : -100%; } .eleven.ii { top : 40px; left : 100%; } .eleven.iii { top : 80px; left : -100%; } .eleven.iv { left : 100%; top : 120px; } .items:hover .eleven { left : 0; transition : all .4s ; } /* twelve */ .twelve { width : inherit; height : 40px; background-color: #e43; transition : all .3s; top : -40px; } .twelve.iv { transition : all .1s; } .twelve.iii { transition : all .1s .1s; } .twelve.ii { transition : all .1s .2s; } .twelve.i { transition : all .1s .3s; } .items:hover .twelve.i { top : 120px; transition : all .2s; } .items:hover .twelve.ii { top : 80px; transition : all .2s .2s ; } .items:hover .twelve.iii { top : 40px; transition : all .2s .4s ; } .items:hover .twelve.iv { top : 0px; transition : all .2s .6s; } /* thirteen */ .thirteen-r , .thirteen-l{ width : 120px; height: inherit; background-color : #e43; top : 0; transition : all .3s; } .thirteen-r { left : 100%; } .thirteen-l { right : 100%; } .items:hover .thirteen-r { transition : all .3s; left : 0; } .items:hover .thirteen-l { transition : all .3s; right : 0; } /* fourteen */ .fourteen-r , .fourteen-l{ width : 120px; height: inherit; background-color : #e43; top : 0; transition : all .3s; } .fourteen-r { left : 100%; } .fourteen-l { right : 100%; } .items:hover .fourteen-r { transition : all .3s; left : 50%; } .items:hover .fourteen-l { transition : all .3s; right : 50%; } /* fifteen */ .t { border-style : solid; border-width : 80px 120px 0 120px; border-color : #e43 transparent transparent transparent; transition : all .3s; top : -80px; } .r { border-style : solid; border-width : 80px 120px 80px 0; border-color : transparent #e43 transparent transparent; right : -120px; transition : all .3s; } .b { border-style : solid; border-width : 0 120px 80px 120px; border-color : transparent transparent #e43 transparent; bottom : -80px; transition : all .3s; } .l { border-style : solid; border-width : 80px 0 80px 120px; border-color : transparent transparent transparent #e43; left : -120px; transition : all .3s; } .items:hover .t { top : 0px; transition : all .3s; } .items:hover .r { right : 0px; transition : all .3s; } .items:hover .b { bottom : 0px; transition : all .3s; } .items:hover .l { left : 0px; transition : all .3s; }
Java script
ندارد
دموی آنلاین
تا بارگذاری کامل کمی صبر کنید
See the Pen Animated Covers by Mojtaba Seyedi (@new) on CodePen
خیلی ممنون از آموزش ها و کد های لایوتون
ممنونم بسیار عالی بود
سلام ممنون از مطالب مفیدتون