悬停时如何在图像上显示文本？

小编典典

悬停时如何在图像上显示文本？

html

我将鼠标悬停在图像上时要显示说明。我已经以一种不太理想的方式做到了这一点，在这里使用了图像精灵和鼠标悬停：我希望它看起来像我的样子，但是使用真实文本而不是图像。

我尝试了几种不同的方法，但似乎无法弄清楚该怎么做。我正在尝试仅使用HTML和CSS进行操作，但不确定是否可行。

请随意在我的代码中四处浏览，我将粘贴我认为与之相关的内容。

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>

阅读 226

2020-05-10

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

2020-05-10