CodePen

HTML

            
              <div class="rad"><a href="#">
            	<img src="http://i.imgur.com/2xYGsuG.gif" />
                <div class="imerada"> Medo </div>
            
          
!

CSS

            
              .rad{
	background-color:#f0f4f6;
	float:left;
	margin-right:20px;
	padding-left:20px;
	padding-right:20px;
	padding-top:20px;
	padding-bottom:5px;
}
.rad:hover{
	background-color:#d1d4d5;
}
.rad img{
	border:none;
	position:relative;
	display:block;
	width:350px;
	-moz-transform:transform 0.2s ease;
	-webkit-transform:transform 0.2s ease;
	transition:transform 0.2s ease;
}
.rad:hover img{
	transform:translateY(-10px);
}
.rad a:link, .rad a:visited{
	padding-top:5px;
	font-size:22px;
	color:#3e3d3d;
	text-decoration:none;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................