引導圖像懸停覆蓋圖標

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>