Hover effect lost on image, when mouse moves over absolutely positioned nephew text

Question

I have an image with some text positioned over it.

When I hover the cursor over the image, I change the color of box-shadow.

Unfortunately, when the cursor reaches the text overlaid on top of the image, the background image loses the hover effect.

How can I keep the hover effect on the image, while the cursor is on the nephew text element?

HTML

<div class="col-xs-6 col-sm-3">
   <a href="#">
      <img src="http://via.placeholder.com/270x200.png">
      <div class="text-overlay">
         <h2><span>Example</span><br>Overlay<br>Text</h2>
      </div>
   </a>
</div>

CSS

img {
    margin-top: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 0px 2px #b2b2b2;
}

img:hover {
        box-shadow: 0px 0px 0px 2px #f47c20;
}

.text-overlay {
  color: #fff;
  position: absolute;
  top: 40px;
  left: 32px;
}

Example codepen: https://codepen.io/Washable/pen/bLGqbP

score 2 · Accepted Answer · answered Jan 29 '18 at 14:19

Make the hover on the a tag :

Codepen : https://codepen.io/anon/pen/rJNyQp

img {
    margin-top: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 0px 2px #b2b2b2;
}

a:hover img {
        box-shadow: 0px 0px 0px 2px #f47c20;
}

.text-overlay {
  color: #fff;
  position: absolute;
  top: 40px;
  left: 32px;
}

<div class="col-xs-6 col-sm-3">
   <a href="#">
      <img src="http://via.placeholder.com/270x200.png">
      <div class="text-overlay">
         <h2><span>Example</span><br>Overlay<br>Text</h2>
      </div>
   </a>
</div>

score 1 · Answer 2 · answered Jan 29 '18 at 14:23

If you want to just show the text, you can use pointer-events:none to the text class .text-overlay.

Stack Snippet

img {
  margin-top: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 0px 2px #b2b2b2;
}

img:hover {
  box-shadow: 0px 0px 0px 2px #f47c20;
}

.text-overlay {
  color: #fff;
  position: absolute;
  top: 40px;
  left: 32px;
  pointer-events: none;
}

<div class="col-xs-6 col-sm-3">
  <a href="#">
    <img src="http://via.placeholder.com/270x200.png">
    <div class="text-overlay">
      <h2><span>Example</span><br>Overlay<br>Text</h2>
    </div>
  </a>
</div>

score 1 · Answer 3 · edited Jan 30 '18 at 00:29

Recommendation

Never put div within a tag, you need to use inline elements.

Inline elements ( a, span, strong, em among others ) can contain other inline elements and text nodes. An anchor can contain a span, which can contain a text node. Reference

Set the HOVER to your a element.

The following code snippet uses the text-overlay class on your h2 tag.

img {
  margin-top: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 0px 2px #b2b2b2;
}

a:hover img {
  box-shadow: 0px 0px 0px 2px #f47c20;
}

.text-overlay {
  color: #fff;
  position: absolute;
  top: 40px;
  left: 32px;
}

<div class="col-xs-6 col-sm-3">

  <a href="#">
      <h2 class='text-overlay'><span>Example</span><br>Overlay<br>Text</h2>
    <img src="http://via.placeholder.com/270x200.png">
  </a>
</div>

score 0 · Answer 4 · answered Jan 29 '18 at 14:22

You need to some changes in your css

img {
    margin-top: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 0px 2px #b2b2b2;
}

a:hover img {
        box-shadow: 0px 0px 0px 2px #f47c20;
}

.text-overlay {
  color: #fff;
  position: absolute;
  top: 40px;
  left: 32px;
  display:block;
}

Facundo Corradini · Answer 5 · 2018-01-29T15:44:58.163

0

First off, the text is not the child for the img, but a nephew (as it's the child of it's div sibling).

Anyway, you can fix that either by going .text-overlay { pointer-events:none; }

or adjusting your html structure as described in other anwsers

edited Jan 29 '18 at 15:44

answered Jan 29 '18 at 15:35

Facundo Corradini

3,825
9
24

Hover effect lost on image, when mouse moves over absolutely positioned nephew text

5 Answers5

Recommendation