d4rty d4rty - 4 months ago 16
CSS Question

Text-overlay over an img on hover

So far I have created a

container
class which contains an
img
element and a
div
element, which contains text. My aim is to have a image which becomes pale and some text appears on top when the user hovers over the image.

The example bellow is working, but if the user hovers over the
div
, which contains the text, the
div
will disappear. Any suggestions how I can disable this behavior?



#container {
position: relative;
width:500px;
height:auto;
}

#center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 18px;
}

#overlayImg {
width: 100%;
height: auto;
opacity: 1;
-webkit-transition: all 4s;
transition: all 0.5s;
transition-timing-function: ease;
}

#overlayImg:hover {
opacity: 0.3;
}

#center{
opacity: 0;
-webkit-transition: all 4s; /* Safari */
transition: all 1s;
transition-timing-function: ease;
}

#overlayImg:hover + #center {
opacity: 1;
}

<div class="container" id="container">

<img id="overlayImg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/FuBK_testcard_vectorized.svg/768px-FuBK_testcard_vectorized.svg.png" alt="Norway" max-width="100px" max-height="100px">

<div id="center" class="center"><h1>test test test<h1></div>
</div>




Answer

You can add pointer-events: none to the div

#container {
  position: relative;
  width: 500px;
  height: auto;
}
#center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  pointer-events: none;
}
#overlayImg {
  width: 100%;
  height: auto;
  opacity: 1;
  -webkit-transition: all 4s;
  transition: all 0.5s;
  transition-timing-function: ease;
}
#overlayImg:hover {
  opacity: 0.3;
}
#center {
  opacity: 0;
  -webkit-transition: all 4s;
  /* Safari */
  transition: all 1s;
  transition-timing-function: ease;
}
#overlayImg:hover + #center {
  opacity: 1;
}
<div class="container" id="container">

  <img id="overlayImg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/FuBK_testcard_vectorized.svg/768px-FuBK_testcard_vectorized.svg.png" alt="Norway">

  <div id="center" class="center">
    <h1>test test test</h1>
  </div>
  
</div>

or update the :hover rules like this

#container:hover #overlayImg {
  opacity: 0.3;
}
#container:hover #center {
  opacity: 1;
}

#container {
  position: relative;
  width: 500px;
  height: auto;
}
#center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
}
#overlayImg {
  width: 100%;
  height: auto;
  opacity: 1;
  -webkit-transition: all 4s;
  transition: all 0.5s;
  transition-timing-function: ease;
}
#center {
  opacity: 0;
  -webkit-transition: all 4s;
  /* Safari */
  transition: all 1s;
  transition-timing-function: ease;
}
#container:hover #overlayImg {
  opacity: 0.3;
}
#container:hover #center {
  opacity: 1;
}
<div class="container" id="container">

  <img id="overlayImg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/FuBK_testcard_vectorized.svg/768px-FuBK_testcard_vectorized.svg.png" alt="Norway">

  <div id="center" class="center">
    <h1>test test test</h1>
  </div>
  
</div>

Side note:

The images max-width="100px" max-height="100px" won't work like that, they either should be like this, inline,

style="max-width:100px;max-height:100px"

or external, in the CSS (recommended)

#overlayImg {
  width: 100%;
  max-width: 100px;
  max-height: 100px;
  height: auto;
  opacity: 1;
  -webkit-transition: all 4s;
  transition: all 0.5s;
  transition-timing-function: ease;
}
Comments