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

Posted 2023-03-05

【中文标题】带图标的引导图像悬停覆盖

【英文标题】：bootstrap image hover overlay with icon

【发布时间】：2015-01-05 13:01:57

【问题描述】：

尝试在引导平台上使用 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" >
      </a>
    </div>
  </div>
</div>

【参考方案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" >
      </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" >
      </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" >
      </a>

    </div>
  </div>
</div>

【参考方案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" >

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

【讨论】：

感谢您的回复，这里是 jsfiddle 网址：jsfiddle.net/Tankucukhas/dhs4bfgj

假设是常规图像，一旦您将鼠标悬停在图像上，就会出现叠加层和图标。

你能看到那里的变化吗？

我认为您需要点击更新并分享新链接

谢谢，我也在处理代码并让它工作，但你的似乎更好地赢得了过渡效果。这是我的：jsfiddle.net/Tankucukhas/ez470dxo