将文字悬停在图像上

如何将文字悬停在图像上？我希望文本框能够完全覆盖图像所在的位置，从而使图像完整消失，并在鼠标移出时重新渲染图像。我搜索everywere，但我只发现悬停效果与图像所在的hoverbox的不同positionig ...将文字悬停在图像上

2013-03-08 Alex Timuş

欢迎StackOverflow上。人们愿意帮助你，但不会为你做所有的工作。显示你到目前为止所做的。 – 2013-03-08 16:14:29

http://mattgemmell.com/2008/12/08/what-have-you-tried/ – 2013-03-08 16:15:23

CSS：

.textHover { 
    display:none; 
    width:100%; 
    height:100%; 
    position:absolute; 
    top:0; left:0; 
    text-align:center; 
    color:white; 
} 
.imgContain { 
    position:relative; 
    display:table; 
} 
.imgContain:hover .textHover { 
    display:block; 
}

标记：

<div class="imgContain"> 
    <img src="http://placehold.it/300x200"/> 
    <div class="textHover">My text here</div> 
</div>

http://jsfiddle.net/EACxV/

来源

2013-03-08 16:20:55 inorganik

这样做的工作......非常感谢 – 2013-03-08 16:59:34

不需要JavaScript，除非你需要一些平滑过渡而不依赖于CSS3。假设图像具有固定的尺寸，你可以这样做：

<div> 
    <p>Text</p> 
    <img src="" alt="" width="100px" height="100px" /> 
</div> 

div { position:relative; z-index:1; height:100px; width:100px; } 
img { position:absolute; top:0; left:0; z-index:2; } 
div:hover img { display:none; }

JSFiddle。

来源

2013-03-08 16:16:43

感谢詹姆斯......但它并没有随着我的意愿而变得模糊，无论如何，非常感谢您花费的时间。 – 2013-03-08 17:02:54

你不需要JavaScript代码来做到这一点。在纯HTMLcss中，它将运行良好。下面是带有不透明度变化的css动画的例子。

HTML

 

    <div class="hvrbox"> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/2/22/Bochnia_poland_saltmine.jpg" alt="Salt mine" class="hvrbox-layer_bottom"> 
     <div class="hvrbox-layer_top"> 
      <div class="hvrbox-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor ligula porttitor, lacinia sapien non.</div> 
     </div> 
    </div>

CSS

 

    .hvrbox, 
    .hvrbox * { 
     box-sizing: border-box; 
    } 
    .hvrbox { 
     position: relative; 
     display: inline-block; 
     overflow: hidden; 
     max-width: 100%; 
     height: auto; 
    } 
    .hvrbox img { 
     max-width: 100%; 
    } 
    .hvrbox .hvrbox-layer_bottom { 
     display: block; 
    } 
    .hvrbox .hvrbox-layer_top { 
     opacity: 0; 
     position: absolute; 
     top: 0; 
     left: 0; 
     right: 0; 
     bottom: 0; 
     width: 100%; 
     height: 100%; 
     background: rgba(0, 0, 0, 0.6); 
     color: #fff; 
     padding: 15px; 
     -moz-transition: all 0.4s ease-in-out 0s; 
     -webkit-transition: all 0.4s ease-in-out 0s; 
     -ms-transition: all 0.4s ease-in-out 0s; 
     transition: all 0.4s ease-in-out 0s; 
    } 
    .hvrbox:hover .hvrbox-layer_top, 
    .hvrbox.active .hvrbox-layer_top { 
     opacity: 1; 
    } 
    .hvrbox .hvrbox-text { 
     text-align: center; 
     font-size: 18px; 
     display: inline-block; 
     position: absolute; 
     top: 50%; 
     left: 50%; 
     -moz-transform: translate(-50%, -50%); 
     -webkit-transform: translate(-50%, -50%); 
     -ms-transform: translate(-50%, -50%); 
     transform: translate(-50%, -50%); 
    } 
    .hvrbox .hvrbox-text_mobile { 
     font-size: 15px; 
     border-top: 1px solid rgb(179, 179, 179); /* for old browsers */ 
     border-top: 1px solid rgba(179, 179, 179, 0.7); 
     margin-top: 5px; 
     padding-top: 2px; 
     display: none; 
    } 
    .hvrbox.active .hvrbox-text_mobile { 
     display: block; 
    }

我有很多类似的例子说明它（更好的动画）这里http://goo.gl/EECjCm

来源

2015-12-06 10:34:48

将文字悬停在图像上

回答

相关问题