如何徘徊时显示图像的文本？(How to show text on image when hover

我想鼠标悬停在图片时显示的说明。 我已经做了比所希望的方式少，利用图像拼接和徘徊在这里： http://willryan.us/design.html我希望它看起来就像我怎么有它，但使用真正的文本，而不是一个图片。

我已经尝试了一些不同的东西，但我似乎无法弄清楚如何做到这一点。 我试图使用HTML和CSS它只是做的，但我不知道这是可能的。

随意戳在我的代码的时候，我就贴什么，我认为是re​​lavent这里。

HTML

 div#projectlist { width: 770px; margin: 0 auto; margin-top: 20px; margin-bottom: 40px; } div#buzzbutton { display: block; float: left; margin: 2px; background: url(content/assets/thumbnails/design/buzz_sprite.jpg) 0 0px no-repeat; width: 150px; height: 150px; } div#buzzbutton:hover { background: url(content/assets/thumbnails/design/buzz_sprite.jpg); width: 150px; height: 150px; background-position: 0 -150px; } div#slinksterbutton { display: block; float: left; background: url(content/assets/thumbnails/design/slinkster_sprite.jpg) 0 0px no-repeat; width: 150px; height: 150px; margin: 2px; } div#slinksterbutton:hover { background: url(content/assets/thumbnails/design/slinkster_sprite.jpg); width: 150px; height: 150px; background-position: 0 -150px; } 

 <div id="projectlist"> <div id="buzzbutton"> <a href="buzz.html" title=""><img src="content/assets/thumbnails/transparent_150x150.png" alt="" /></a> </div> <div id="slinksterbutton"> <a href="slinkster.html" title=""><img src="content/assets/thumbnails/transparent_150x150.png" alt="" /></a> </div> </div> 

Answer 1:

这很简单。 包裹所述图像和所述“出现在悬停”描述与图像的尺寸相同的一个div。 然后，用一些CSS，责令盘旋而该div出现说明。

 /* quick reset */ * { margin: 0; padding: 0; border: 0; } /* relevant styles */ .img__wrap { position: relative; height: 200px; width: 257px; } .img__description { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(29, 106, 154, 0.72); color: #fff; visibility: hidden; opacity: 0; /* transition effect. not necessary */ transition: opacity .2s, visibility .2s; } .img__wrap:hover .img__description { visibility: visible; opacity: 1; } 

 <div class="img__wrap"> <img class="img__img" src="http://placehold.it/257x200.jpg" /> <p class="img__description">This image looks super neat.</p> </div> 

一个很好的小提琴： https://jsfiddle.net/govdqd8y/

文章来源: How to show text on image when hovering?