hover时如何在图像上显示文字？
我试图显示一个描述时，hover在图像上。 我已经做了一个不太可取的方式，使用图像精灵和盘旋在这里： http : //willryan.us/design.html我希望它看起来完全像我有，但使用真正的文字，而不是图片。
我尝试了一些不同的东西，但我似乎无法弄清楚如何做到这一点。 我试图只使用HTML和CSS，但我不知道这是可能的。
随意在我的代码中徘徊，我会粘贴我认为是相关的在这里。
HTML
<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> CSS
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; }
这很简单。 用图像的相同尺寸将图像和“出现在hover”的描述包裹在一个div中。 然后，使用一些CSS，在hover该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>
在你的HTML中，试着把你想要的文字放在代码的标题部分：
<a href="buzz.html" title="buzz hover text">
您也可以对图像的替代文字执行相同的操作。
您也可以在图片标签中使用title属性
<img src="content/assets/thumbnails/transparent_150x150.png" alt="" title="hover text" />
这是我用来使文本出现在hover：
* { box-sizing: border-box } div { position: relative; top: 0px; left: 0px; width: 400px; height: 400px; border-radius: 50%; overflow: hidden; text-align: center } img { width: 400px; height: 400px; position: absolute; border-radius: 50% } img:hover { opacity: 0; transition:opacity 2s; } heading { line-height: 40px; font-weight: bold; font-family: "Trebuchet MS"; text-align: center; position: absolute; display: block } div p { z-index: -1; width: 420px; line-height: 20px; display: inline-block; padding: 200px 0px; vertical-align: middle; font-family: "Trebuchet MS"; height: 450px }
<div> <img src="https://68.media.tumblr.com/20b34e8d12d4230f9b362d7feb148c57/tumblr_oiwytz4dh41tf8vylo1_1280.png"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing <br>elit. Reiciendis temporibus iure dolores aspernatur excepturi <br> corporis nihil in suscipit, repudiandae. Totam. </p> </div>
.container { position: relative; width: 50%; } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: #008CBA; } .container:hover .overlay { opacity: 1; } .text { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); }
<!DOCTYPE html> <html> <head></head> <body> <div class="container"> <img src="http://lorempixel.com/500/500/" alt="Avatar" class="image"> <div class="overlay"> <div class="text">Hello World</div> </div> </div> </body> </html>
