Hola, te dejo el código que se utilizo en una de las paginas que mostraste, para la flecha solo agrégale algún tipo de icon, te recomiendo font awesome.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>q</title>
<style type="text/css">
a.uk-thumbnail:hover, a.uk-thumbnail:focus {
border-color: rgba(9, 11, 12, 0.04);
background-color: #F8FBFC;
text-decoration: none;
outline: medium none;
left: 0px; }
.uk-thumbnail {
display: inline-block;
box-sizing: border-box;
max-width: 100%;
margin: 0px;
padding: 0px;
border: 15px solid rgba(95, 120, 130, 0.04);
background: none repeat scroll 0% 0% #F8FBFC; }
.uk-overlay {
display: inline-block;
position: relative;
max-width: 100%;
overflow: hidden;
vertical-align: middle; }
.uk-thumbnail:hover .uk-overlay img {
transform: scale(1.2) rotateZ(-3deg); }
a.uk-thumbnail:hover .uk-overlay-area {
left: 0;
opacity: 1; }
.uk-thumbnail .uk-overlay img {
transition: all 0.25s ease-in-out 0s; }
img {
box-sizing: border-box;
max-width: 100%;
height: auto;
vertical-align: middle; }
.uk-overlay-area {
position: absolute;
top: 0px;
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.7);
opacity: 0;
width: 100%;
height: 100%;
left: -100%;
transition: all 0.25s ease-in-out 0s; }
.uk-overlay-area:before {
content: ">";
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 30px;
margin-top: -15px;
margin-left: -15px;
font-size: 30px;
line-height: 1;
font-family: "FontAwesome";
text-align: center;
color: #FFF;
}
</style>
</head>
<body>
<div id="q">
<a class="uk-thumbnail" href="#">
<div class="uk-overlay">
<img src="http://yootheme.com/demo/themes/wordpress/2013/lava/wp-content/uploads/yootheme/frontpage_work_teaser2.jpg" alt="work teaser 2" height="308" width="308">
<div class="uk-overlay-area">
</div>
</div>
</a>
</div>
</body>
</html>
Saludos!
