JSFiddle - React, Tailwind, and code Playground
HTML
<script src="<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootst"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<div class="container">
<div class="col-md-4">
<div class="pdf-thumb-box-overlay">
<a href="#2013-Katalog">
<i class="glyphicon glyphicon-eye-open"></i>
</a>
</div>
<img class="img-responsive" src="http://i.imgur.com/Cn1ev16.jpg" alt="2013 Genel Katalog">
</div>
</div>
CSS
body {
font-family: arial;
font-size: 10pt;
}
.pdf-thumb-box {
position: relative;
overflow: hidden;
display: block;
}
.pdf-thumb-box-overlay {
background: #000;
color: #FFF;
padding: 20px;
position: absolute;
visibility: hidden;
width:100%;
height:100%;
text-align:center;
}
.glyphicon-eye-open{
margin-top:60px;
color:red;
}
img {
width: 362px;
}
JavaScript
$(".pdf-thumb-box").hover(function() {
var imgWidth = $(this).children("img").width();
var imgHeight = $(this).children("img").height();
var negImgWidth = imgWidth - imgWidth - imgWidth;
$(this).children(".pdf-thumb-box-overlay").fadeTo(0, 0.8);
$(this).css("width", (imgWidth)+"px");
$(this).css("height", (imgHeight)+"px");
$(this).children(".pdf-thumb-box-overlay").css("left", negImgWidth+"px");
$(this).children(".pdf-thumb-box-overlay").css("visibility", "visible");
$(this).children(".pdf-thumb-box-overlay").animate({"left": 0}, 250);
}, function() {
var imgWidth = $(this).children("img").width();
var imgHeight = $(this).children("img").height();
var negImgWidth = imgWidth - imgWidth - imgWidth;
$(this).children(".pdf-thumb-box-overlay").animate({"left": negImgWidth}, 250);
});