html - 带有图标的 Bootstrap 图像悬停叠加

Question

尝试在 Bootstrap 平台上使用 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>