Sure you can:
HTML:
<div class="img">
<img src="http://i.stack.imgur.com/TOVE8.jpg" />
<div class="overlay">
<span class="bg"></span>
<span class="txt">Name<br/>Surname</span>
</div>
</div>
CSS:
.img {overflow: hidden; height: 360px; width: 240px; position: relative;}
.overlay {position: absolute; height: 100%; width: 100%; top: 0; left: 100%;
-webkit-transition: left 1s ease-out;
-moz-transition: left 1s ease-out;
-o-transition: left 1s ease-out;
transition: left 1s ease-out;
}
.img:hover .overlay {left: 0;}
.bg {height: 600px; width: 600px; top: 50px; left: 90px;background: #000; position: absolute; display: block;
-webkit-transform: rotate(34deg);
-moz-transform: rotate(34deg);
-ms-transform: rotate(34deg);
-o-transform: rotate(34deg);
transform: rotate(34deg);
}
.txt {color: #fff; font-size: 30px; top: 250px; left: 100px; position: absolute;}