Loremiaou gallery

index.jade

link(rel='stylesheet', type="text/css", href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300")


.container
  .gallery
    -var legend="Loremiaou ipsumiaou doloronron";
    each category in  ['cats','food','cats','abstract','animals','cats','food','cats','abstract','cats']
      figure.gal-wrapper
         a(href="#").gal-thumb
          img(src="http://lorempixel.com/200/200/"+category+'/',alt=legend)
          span.legend=legend
    

Loremiaou-gallery.markdown

Loremiaou gallery

A Pen by Vincent on CodePen.

License.

style.less

body{
  font-family:'Yanone Kaffeesatz',sans-serif;
}


.container{
  width:960px;
  margin:0 auto;
}



.gallery{
  margin-left:70px;
  margin-top:150px;

  .gal-wrapper{
    float:left;
    margin-left:-70px;
  }

  .gal-wrapper:nth-child(2n+0){
    margin-top:-80px;
    
  }

  .gal-thumb{
    transition:all .5s;
    transform:rotate(45deg) translate(20%,-10%);
    float:left;
    overflow:hidden;
    width:119px;
    height:119px;
    background-color:#000000;

    .legend{
      position:absolute;
      top:50%;
      //left:50%;
      text-align:center;
      width:160px;
      color:#fff;
      font-variant:small-caps;
      font-size:24px;
      transform:rotate(-45deg) translate(4%,-50%);
      opacity:0;
      pointer-event:none;
    }

    img{
            transform:rotate(-45deg) translate(-5%,-20%);
      transition:opacity .3s;

    }
    
    &:hover{
      .legend{
        opacity:1;
      }
      
      img{
        opacity:.2;
      }
    }
  }
}