Which # do you prefer ?
A Pen by Mojtaba Seyedi on CodePen.
Which # do you prefer ?
A Pen by Mojtaba Seyedi on CodePen.
<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 photo in 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 photo in 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 photo in 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 photo in 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 photo in 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 photo in 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 photo in 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 photo in 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 photo in 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 photo in 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 photo in 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 photo in 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 photo in 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 photo in 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 photo in your gallery.</p> | |
<h6>time & date</h6> | |
</div> | |
</div> | |
</div> | |
</div> |
/* | |
Which # do you prefer ? Comment me :) | |
*/ |
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 : opacity .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; | |
line-height : 20px; | |
} | |
.items:hover .details { | |
opacity : 1; | |
transition : opacity .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; | |
} |