Skip to content

Instantly share code, notes, and snippets.

@seyedi

seyedi/Animated Covers.markdown

Created June 22, 2015 09:11
Show Gist options
  • Save seyedi/bd2d36b2898260f77bed to your computer and use it in GitHub Desktop.
Save seyedi/bd2d36b2898260f77bed to your computer and use it in GitHub Desktop.
Download ZIP
Animated Covers
Raw
Animated Covers.markdown
Raw
index.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 photo in your gallery.</p>
<h6>time &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; date</h6>
</div>
</div>
</div>
</div>
Raw
script.js
/*
Which # do you prefer ? Comment me :)
*/
Raw
style.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 : 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment