부트 스트랩 이미지 호버 오버레이 아이콘으로

Question

부트 스트랩 플랫폼에서 CSS로 이미지에 유사한 효과를 만들려고합니다. 구현하는 데 약간의 어려움이 있습니다. 내가하려는 것은 이미지 호버 위에 상자와 중앙에있는 글리프 아이 아이콘으로 투명한 화면을 적용하는 것입니다. 그러면 반응이 좋을 것으로 생각됩니다. 난 단지 CSS를 사용하여 만든

<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

대체 솔루션 : 다음은 내 코드와 효과의 스크린 샷이다. 여기에 답장을 보내 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>