带图标的引导图像悬停覆盖

Question

尝试在引导平台上使用 CSS 在图像上创建类似的效果。实施起来有些困难。我想要做的是在图像悬停上应用一个带有框和居中的 glyp-eye 图标的透明叠加，它应该是响应式的。下面是我的代码和效果截图：

<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

我仅使用 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>