<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" /> <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" /> <div class="container"> <div class="col-md-4"> <div class="pdf-thumb-box"> <a href="#2013-Katalog"> <div class="pdf-thumb-box-overlay"><span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x pdf-thumb-square"></i> <i class="fa fa-eye fa-stack-1x pdf-thumb-eye"></i> </span> </div> <img class="img-responsive" src="http://i.imgur.com/Cn1ev16.jpg" alt="2013 Genel Katalog"> </a> </div> <div class="vertical-social-box"></div> </div> <div class="col-md-4"> <div class="pdf-thumb-box"> <a href="#2013-Katalog"> <div class="pdf-thumb-box-overlay"><span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x pdf-thumb-square"></i> <i class="fa fa-eye fa-stack-1x pdf-thumb-eye"></i> </span> </div> <img class="img-responsive" src="http://i.imgur.com/Cn1ev16.jpg" alt="2013 Genel Katalog"> </a> </div> <div class="vertical-social-box"></div> </div> <div class="col-md-4"> <div class="pdf-thumb-box"> <a href="#2013-Katalog"> <div class="pdf-thumb-box-overlay"><span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x pdf-thumb-square"></i> <i class="fa fa-eye fa-stack-1x pdf-thumb-eye"></i> </span> </div> <img class="img-responsive" src="http://i.imgur.com/Cn1ev16.jpg" alt="2013 Genel Katalog"> </a> </div> </div> </div>

.pdf-thumb-box { display: inline-block !important; position: relative !important; overflow: hidden; } .pdf-thumb-box-overlay { display: none; } .pdf-thumb-box a:hover .pdf-thumb-box-overlay { display: inline; text-align: center; position: absolute; transition: background 0.2s ease, padding 0.8s linear; background-color: rgba(255, 0, 0, 0.58); color: #fff; width: 100%; height: 100%; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); } .pdf-thumb-box-overlay span { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }