Problems with hover CSS and text

Question

I have a problem. When I hover the mouse over in the picture I see too dark text. I want to white text in this picture. You'll solve this?

#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;
}

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

Without text

With text but dark text

The opacity will affect the entire element, including text - you need to separate the text from this property, or use rgba() on the background — Andyjm, Oct 04 '17 at 13:08
I am trying to post an answer but the "Post your answer" button is greyed out - what's happening? — Johannes, Oct 04 '17 at 13:13
hmm, strange things happening here: Later on the button became clickable, but Captcha verification wouldn't work - "Could not connect to reCaptcha"... — Johannes, Oct 04 '17 at 13:18

score 0 · Accepted Answer · answered Oct 04 '17 at 13:12

I have added a little CSS to make it work in this demo, but basically you will need to target the image directly like this so that it doesn't affect your text as well:

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

#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;
}

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

Problems with hover CSS and text

1 Answers1