将文字悬停在图像上
如何将文字悬停在图像上?我希望文本框能够完全覆盖图像所在的位置,从而使图像完整消失,并在鼠标移出时重新渲染图像。我搜索everywere,但我只发现悬停效果与图像所在的hoverbox的不同positionig ...将文字悬停在图像上
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>
这样做的工作......非常感谢 – 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; }
感谢詹姆斯......但它并没有随着我的意愿而变得模糊,无论如何,非常感谢您花费的时间。 – 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
欢迎*上。人们愿意帮助你,但不会为你做所有的工作。显示你到目前为止所做的。 – 2013-03-08 16:14:29
http://mattgemmell.com/2008/12/08/what-have-you-tried/ – 2013-03-08 16:15:23