Animated Covers

Animated Covers.markdown

Animated Covers

Which # do you prefer ?

A Pen by Mojtaba Seyedi on CodePen.

License.

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>

script.js

/*
Which # do you prefer ? Comment me :)
*/

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;
}