CodePen

HTML

            
              	<!-- Header with title-->
	<header>
		<div class="wrapper">
			<a href="http://bit.ly/inContent" class="btn-download pull-right">DOWNLOAD</a>

			<h1>InContent</h1>
			<p>Image content with description building with CSS3 and LESS.</p>

		</div>
	</header>
	
	<!-- Begin of Effects -->

	<section class="wrapper cl">
		<!--Effect: Bottom to Top -->
		<div class="pic">
		    <img src="http://i.imgur.com/UnG2nyG.jpg" class="pic-image" alt="Pic"/>
		    <span class="pic-caption bottom-to-top">
		        <h1 class="pic-title">Bottom to Top</h1>
		        <p>Hi, this is a simple example =D</p>
		    </span>
		</div>

		<!--Effect: Top to Bottom -->
		<div class="pic">
		    <img src="http://i.imgur.com/CoL8p96.png" class="pic-image" alt="Pic"/>
		    <span class="pic-caption top-to-bottom">
		        <h1 class="pic-title">Top to Bottom</h1>
		        <p>Hi, this is a simple example =D</p>
		    </span>
		</div>
		<!--Effect: Left to Right -->
		<div class="pic">
		    <img src="http://i.imgur.com/0MbMKYt.jpg" class="pic-image" alt="Pic"/>
		    <span class="pic-caption left-to-right">
		        <h1 class="pic-title">Left to Right</h1>
		        <p>Hi, this is a simple example =D</p>
		    </span>
		</div>

		<!--Effect: Right to Left -->
		<div class="pic">
		    <img src="http://i.imgur.com/5iTTMpN.png" class="pic-image" alt="Pic"/>
		    <span class="pic-caption right-to-left">
		        <h1 class="pic-title">Right to Left</h1>
		        <p>Hi, this is a simple example =D</p>
		    </span>
		</div>

		<!--Effect: Rotate More -->
		<div class="pic">
		    <img src="http://i.imgur.com/q4JrRIq.png" class="pic-image" alt="Pic"/>
		    <span class="pic-caption rotate-in">
		        <h1 class="pic-title">Rotate In</h1>
		        <p>Hi, this is a simple example =D</p>
		    </span>
		</div>

		<!--Effect: Rotate LESS -->
		<div class="pic">
		    <img src="http://i.imgur.com/PDO045X.png" class="pic-image" alt="Pic"/>
		    <span class="pic-caption rotate-out">
		        <h1 class="pic-title">Rotate Out</h1>
		        <p>Hi, this is a simple example =D</p>
		    </span>
		</div>

		<!--Effect: Open Up -->
		<div class="pic pic-3d">
		    <img src="http://i.imgur.com/YKliAPD.jpg" class="pic-image" alt="Pic"/>
		    <span class="pic-caption open-up">
		        <h1 class="pic-title">Open Up</h1>
		        <p>Hi, this is a simple example =D</p>
		    </span>
		</div>

		<!--Effect: Open Down -->
		<div class="pic pic-3d">
		    <img src="http://i.imgur.com/X4AUJbE.jpg" class="pic-image" alt="Pic"/>
		    <span class="pic-caption open-down">
		        <h1 class="pic-title">Open Down</h1>
		        <p>Hi, this is a simple example =D</p>
		    </span>
		</div>

		<!--Effect: Open Left -->
		<div class="pic pic-3d">
		    <img src="http://i.imgur.com/KrtOHF5.png" class="pic-image" alt="Pic"/>
		    <span class="pic-caption open-left">
		        <h1 class="pic-title">Open Left</h1>
		        <p>Hi, this is a simple example =D</p>
		    </span>
		</div>

		<!--Effect: Open Right -->
		<div class="pic pic-3d">
		    <img src="http://i.imgur.com/mIcamEx.png" class="pic-image" alt="Pic"/>
		    <span class="pic-caption open-right">
		        <h1 class="pic-title">Open Right</h1>
		        <p>Hi, this is a simple example =D</p>
		    </span>
		</div>

		<!--Effect: Come Left -->
		<div class="pic pic-3d">
		    <img src="http://i.imgur.com/95tL1pt.png" class="pic-image" alt="Pic"/>
		    <span class="pic-caption come-left">
		        <h1 class="pic-title">Come Left</h1>
		        <p>Hi, this is a simple example =D</p>
		    </span>
		</div>

		<!--Effect: Come Right -->
		<div class="pic pic-3d">
		    <img src="http://i.imgur.com/qFbj2rO.png" class="pic-image" alt="Pic"/>
		    <span class="pic-caption come-right">
		        <h1 class="pic-title">Come Right</h1>
		        <p>Hi, this is a simple example =D</p>
		    </span>
		</div>

		
	</section>
	<!-- End of effects -->
	
	<footer>
		<section class="wrapper">
			<span class="pull-right">
				
			</span>
			<p>
				InContent by <a href="http://bit.ly/BrunoTw" title="Follow Bruno Rodrigues">Bruno Rodrigues.</a> | Images from <a href="http://www.dribbble.com" title="Dribbble">Dribbble</a>.
			</p>

		</section>
	</footer>

            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              @import url(http://font-style: em;googleapis.com/css?family=Open+Sans);

@color1: rgba(231, 76, 60, 0.92);
@color2: rgba(41, 128, 185, 0.92);
@color3: rgba(44, 62, 80,0.92);
@color4: rgba(0, 180, 150,0.92);
@color5: rgba(73, 73, 73,0.92);

@maincolor: @color3;

/*Globals*/
body{
    background: @maincolor;
    color: #fff;    
    font-size: 14px;
    font-family: 'Open Sans', sans-serif, 'trebuhet ms',HelveticaNeue, arial;
    height: 100%;
    line-height: 20px;
}

.transition(@prop, @time, @type){
    transition: @prop @time @type;
    -webkit-transition: @prop @time @type;
    -moz-transition: @prop @time @type;
}

*{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.cl{
    display:block;
}
.cl:after{
    content:'';
    display: block;
    clear: both;
    *zoom:1;
}

p{
    line-height: 2.0em;
}
h1{
    font-size: 3.0em;
    line-height: 40px;
}
a{
    text-decoration:none;
    color: @maincolor + rgb(30,30,30) ;
}
a:hover{
    color: #fff;
}
img{
    max-width:100%;
}

.pull-right{float: right;}
.pull-left{float: left;}

header{
    padding: 30px 20px;
    background: @maincolor + rgba(20,20,20,1);
    color: #ffffff;
    margin-bottom: 20px;   
}

.btn-download{
    background: @maincolor - rgb(20,20,20);
    color: @maincolor + rgb(80,80,80) ;
    padding: 20px 50px;
    display: inline-block;
    border-radius: 5px;
    &:hover{
        background: @maincolor + rgb(50,50,50);
    }
}

.wrapper{
    max-width: 1000px;
    margin: 0 auto;    
}
footer{
    margin-top: 30px;
    background: @maincolor - rgb(20,20,20);
    color: @maincolor + rgb(80,80,80) ;
    padding: 20px 0;
    text-align:left;
    font-size: 0.9em;
}


/*--- CONTENT STRUCTURE ---*/
.pic{
    max-width: 300px;
    max-height: 200px;
    position: relative;
    overflow: hidden;
    margin: 10px;   
    
    display: inline-block;

    animation: anima 2s;
    -webkit-animation: anima 2s;
  
   backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}
.pic-3d{
    -webkit-perspective: 500;
    -webkit-transform-style: preserve-3d;
}

.pic-caption{
    cursor: default;
    position: absolute;
    width: 100%;
    height: 100%;
    background: @maincolor;
    opacity:0;
    padding: 10px;
    text-align:center;
}

.pic-image{
     -webkit-transform: scale(1.1);
             transform: scale(1.1);
}
.pic:hover .pic-image{
    -webkit-transform: scale(1);
            transform: scale(1);
}
.pic-title{
    font-size: 1.8em;
}

/*All classes with similar attribute*/
a ,a:hover,
.pic .pic-image,
.pic-caption,
.pic:hover .pic-caption,
.pic:hover img{
     .transition(all, 0.5s, ease);
}

/*--- EFFECTS AND TRANSITIONS ---*/

.pic:hover .bottom-to-top,
.pic:hover .top-to-bottom,
.pic:hover .left-to-right,
.pic:hover .right-to-left,
.pic:hover .rotate-in,
.pic:hover .rotate-out,
.pic:hover .open-up,
.pic:hover .open-down,
.pic:hover .open-left,
.pic:hover .open-right,
.pic:hover .come-left,
.pic:hover .come-right{
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;
}
/*Bottom to Top*/
.bottom-to-top{
    top:50%;    
    left:0;
}
.pic:hover .bottom-to-top{
    top:0;
    left:0;
}
/*Top to Bottom*/
.top-to-bottom{
    bottom:50%;    
    left:0;
}
.pic:hover .top-to-bottom{
    left:0;
    bottom:0;
}
/*Left to Right*/
.left-to-right{
    top:0;
    right:50%;
}
.pic:hover .left-to-right{
    right:0;
    top:0;
}

/*Right to Left*/
.right-to-left{
    top:0;
    left:50%;
}
.pic:hover .right-to-left{
    left:0;
    top:0;
}
/*Rotate in*/
.rotate-in{
    transform: rotate(90deg) scale(0.1);
    -webkit-transform: rotate(90deg) scale(0.1);
    top:0;
    left: 0;
}
.pic:hover .rotate-in{
     -webkit-transform: rotate(360deg) scale(1);
}
/*Rotate out*/
.rotate-out{
    transform: rotate(90deg) scale(3.0);
    -webkit-transform: rotate(90deg) scale(3.0);  
    top:0;
    left: 0;
}
.pic:hover .rotate-out{
    -webkit-transform: rotate(360deg) scale(1);
  transform: rotate(360deg) scale(1);
}

/*Open Up*/
.open-down{
    -webkit-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
    top:0;
    left: 0;
}
.pic:hover .open-down{
    -webkit-transform: rotateX(0);
  transform: rotateX(0);
}


/*Open down*/
.open-up{
    -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
 
    top:0;
    left: 0;
}
.pic:hover .open-up{
    -webkit-transform: rotateX(0);
  transform: rotateX(0);
}

/*Open Left*/
.open-left{
    -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
    left:0;
    top:0;
}
.pic:hover .open-left{
    -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

/*Open Right*/
.open-right{
    -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
    left:0;
    top:0;
}
.pic:hover .open-right{
    -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

/*Open Come In*/
.come-left{
    -webkit-transform: rotateY(90deg) rotateX(90deg);
  transform: rotateY(90deg) rotateX(90deg);
    left:0;
    top:0;
}
.pic:hover .come-left{
    -webkit-transform: rotateY(0) rotateX(0);
  transform: rotateY(0) rotateX(0);
}

/*Open Come Out*/
.come-right{
    -webkit-transform: rotateY(-90deg) rotateX(-90deg);
  transform: rotateY(-90deg) rotateX(-90deg);
    left:0;
    top:0;
}
.pic:hover .come-right{
    -webkit-transform: rotateY(0) rotateX(0);
  transform: rotateY(0) rotateX(0);
}


/*Animation Effect*/
@keyframes anima{
    from{
        margin-top: -50px;
        opacity: 0;
    }
    to{
        margin: auto;
        opacity: 1;
    }
}
@-webkit-keyframes anima{
    from{
        margin-left: -20px;
        opacity: 0;
    }
    to{
        margin-left: 10px;
        opacity: 1;
    }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /*
    InContent | CSS3/LESS
    Download: http://bit.ly/inContent
    
    Author: Bruno Rodrigues
    url: http://bit.ly/Brunotw
*/
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................