CODEWITHSUNDEEP
htmlcss
d4rty
d4rty

Reputation: 4178

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>

Upvotes: 0

Views: 61

Answers (1)

Asons
Asons

Reputation: 87191

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

Upvotes: 3

Related Questions