如何在悬停覆盖图像中包含文本-仅HTML，CSS，JavaScript

Question

Below is code that once hovered over the shape words will appear behind. 下面是代码，一旦将鼠标悬停在形状字上，它们就会出现在后面。 Having two problems here: 1. If I make the font small (24px), the dark grey will not cover the whole shape. 这里有两个问题：1.如果我将字体缩小（24像素），则深灰色将无法覆盖整个形状。 2. I want to include words with the hover, eg I want it to display information on the shape before hovering, then fade away with the shape to show the new info behind it. 2.我想在悬停中包含单词，例如，我希望它在悬停之前在形状上显示信息，然后淡出该形状以在其后面显示新信息。 Like a name fading away to give a bio. 就像一个淡出名字的生物一样。

I used w2schools to compile this: https://www.w3schools.com/code/tryit.asp?filename=FT2LEOI9SQQN 我使用w2schools进行了编译： https ://www.w3schools.com/code/tryit.asp?filename = FT2LEOI9SQQN

<html>

<div id="box">

  <div id="overlay">
    <span id="plus">Hello<br>Hi</span>
  </div>

</div>

<style>
body {
  background: #e7e7e7;
}
#box {
  width: 300px;
  height: 200px;
  box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, 0.45);
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  margin: 5% auto 0 auto;
  background-size: cover;
  border-radius: 5px;
  overflow: hidden;

}

#overlay {
  background: rgba(0, 0, 0, 0.75);
  text-align: center;
  padding: 45px 0 66px 0;
  opacity: 0;
  -webkit-transition: opacity 0.25s ease;
  -moz-transition: opacity 0.25s ease;
}

#box:hover #overlay {
  opacity: 1;
}

#plus {
  font-family: Helvetica;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.85);
  font-size: 24px;
}

</style>
</html>

Answer 1

Kindly have a look over the modified Code, It's now covering the whole Div. 请查看修改后的代码，现在它涵盖了整个Div。 I am a bit fuzzy about your second point, hope will solve it also. 我对您的第二点有些模糊，希望也能解决。 I have tested the code, You can test also, next time be careful to use your own Editor for better output. 我已经测试了代码，也可以进行测试，下次请小心使用自己的编辑器以获得更好的输出。 If the Code Solve your problem, then Vote Up to Acknowledge our effort. 如果《代码》解决了您的问题，请投票确认我们的努力。 Thank You. 谢谢。 Best Wishes, 最好的祝愿，

<html>
<head>
<title>
</title>
<style>
body {
  background: #e7e7e7;
}
#box {
  width: 300px;
  height: 177px;
  box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, 0.45);
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  margin: 5% auto 0 auto;
  background-size: cover;
  border-radius: 5px;
  overflow: hidden;

}

#overlay {
  background: rgba(0, 0, 0, 0.75);
  text-align: center;
  padding: 45px 0 66px 0;
  opacity: 0;
  -webkit-transition: opacity 0.25s ease;
  -moz-transition: opacity 0.25s ease;
}

#box:hover #overlay {
  opacity: 1;
}

#plus {
  font-family: Helvetica;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.85);
  font-size: 24px;
}

</style>

</head>
<div id="box">

  <div id="overlay">
    <span id="plus">Hello<br>Hi</span>
  </div>

</div>

</html>

如何在悬停覆盖图像中包含文本-仅HTML，CSS，JavaScript

问题描述

1 个解决方案

解决方案1
2 已采纳 2018-07-07 14:03:56

如何在悬停覆盖图像中包含文本-仅HTML，CSS，JavaScript

问题描述

1 个解决方案

解决方案1 2 已采纳 2018-07-07 14:03:56

解决方案1
2 已采纳 2018-07-07 14:03:56