bootstrap image hover overlay with icon

Question

Trying to create similar effect on the image with CSS on bootstrap platform. Having some hard time to implement. What I'm trying to do is on image hover apply an transparent overplay with a box and a centered glyp-eye icon and it suppose to be responsive. Below is my code and the screenshot of the effect:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"> 

.pdf-thumb-box 
{
  display: inline-block !important;
  position: relative !important;
}

.pdf-thumb-title-active 
{
  color: #000;
}
.pdf-thumb-box-overlay 
{
  position: absolute;
  background-color: rgba(15, 15, 15, 0.31);
  width: 100%;
  height: 100%;
}
.pdf-thumb-box-overlay i 
{
  bottom: 50%;
  top: 50%;
  position: absolute;
  font-size: 40px;
  margin-left: -10px;
  margin-top: -10px;
}

<div class="container">
  <div class="col-md-4">
    <div class="pdf-thumb-box">
      <a href="#2013-Katalog">
        <div class="pdf-thumb-box-overlay">
          <div class="center-box"></div><i class="glyphicon glyphicon-eye-open"></i> 
        </div>
        <img class="img-responsive" src="http://i.imgur.com/Cn1ev16.jpg" alt="2013 Genel Katalog">
      </a>
    </div>
  </div>
</div>

Answer 1

Alternative solution I made with only using CSS. http://jsfiddle.net/Tankucukhas/ez470dxo/4/

.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%);
}

<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>

Answer 2

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"> 
        <style>
        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;
        }

        </style>
        <div class="container">
          <div class="col-md-4">
            <div class="pdf-thumb-box">
               <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>
        </div>


   <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>   
        <script>
        $(document)ready(function(){
            $(".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);

        });
        });

        </script>