悬停CSS和文字的问题

Question

我有问题。当我将鼠标悬停在图片中时，我看到的文字太暗了。我想在这张照片中使用白色文字。你能解决这个问题吗？

＆＃13;

＆＃13;

#tile:hover {
  cursor: pointer;
  opacity: 0.1;
}

#tile .text {
  position:relative;
  bottom:30px;
  visibility: hidden;
}

#tile:hover .text {
  visibility: visible;
  text-align: center;
  margin-top: -80px;
  color: white;
  cursor: pointer;
}

＆＃13;

<div id = "container">
  <div class = "square">
      <div id="tile"><img src="image/shampoo.png"><p class="text">Shampoo</p></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

没有文字

使用文字但文字较暗

Answer 1

我添加了一些CSS以使其在此演示中有效，但基本上您需要直接定位图像，以便它也不会影响您的文本：

#tile:hover img {opacity: .1;}

＆＃13;

＆＃13;

#container {
  background: black;
  width: 200px;
}

#tile:hover
{
  cursor: pointer;
}

#tile:hover img /* Only add opacity to image */
{
  opacity: 0.1;
}

#tile .text 
{
  position:relative;
  bottom:30px;
  visibility: hidden;
}

#tile:hover .text
{
  visibility: visible;
  text-align: center;
  /*margin-top: -80px;*/
  color: white;
  cursor: pointer;
}

＆＃13;

<div id = "container">
  <div class = "square">
    <div id="tile"><img src="http://placehold.it/200x200"><p class="text">Shampoo</p></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;