RaRa

imge {
margin: 3px;
width: 100px;
height: 100px;
overflow: hidden;
position: relative ;
float: left;
}
name {
position: absolute;
display: block;
width: 300px;
height: 30px;
top: 30px;
margin-left: -20px;
opacity: 0;
text-align: center;
color:#ffffff;
background: transparent;
-webkit-transition-duration: 0.8s;
line-height: 4px;
text-transform: uppercase ;
-webkit-transform: rotate(-15deg);
font-size: 15px;
font-family: verdana;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
imge:hover name { left: 20px; top: 60px; bottom: 5px; opacity: 1; width: 103px; height: 20px; line-height: 20px; -webkit-transform: rotate(0deg) moz-opacity:.80;opacity:.80 ; -webkit-transition-duration: .50s;}</style>
<a href="LINK"><imge><img src="URL IMAGE" width="200" /> <name>NAME</name></imge></a></div>