Overlay image on hover, on dynamically-sized div

Question

So here's what I have:

<div class="overlay">
    <p>text text</p>
</div>

<div class="overlay">
    <p>text text text text text text</p>
    <p>text text text text text text</p>
    <p>text text text text text text</p>
    <p>text text text text text text</p>
</div>

What I want to do is this: whenever I rollover a div with the class overlay, I want a semi-transparent 5px x 5px image to overlay the div. The image would have to repeat to fill up the width and height of the div.

What's the best way to do this? My initial thought was whenever I rollover a div with that class, I dynamically create an absolute positioned div that has the same exact width and height of the div I'm rolling over, and that new div has the transparent repeating background image.

Your final paragraph sounds like a good solution .. have you tried that? — Explosion Pills, Dec 18 '12 at 04:13
@ExplosionPills - Not yet, it was just my initial thought, I just wanted to check and see if anyone had a better solution. — Steven, Dec 18 '12 at 04:16

score 3 · Accepted Answer · edited Nov 23 '19 at 15:34

You can use pseudo elements, no need for JS:

div.overlay { 
  position: relative;
}
div.overlay:hover:after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(img.png);
  opacity: .5; /* if needed */
}

Demo: http://jsbin.com/ayesec/3/edit

div.overlay {
  position: relative;
  width: 300px;
  background: yellow;
}

div.overlay:hover:after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(https://placekitten.com/5/5);
  opacity: .5;
}

<div class="overlay">
  <p>text text text text text text</p>
  <p>text text text text text text</p>
  <p>text text !!HOVER!! text text</p>
  <p>text text text text text text</p>
  <p>text text text text text text</p>
</div>

score 0 · Answer 2 · answered Dec 18 '12 at 04:13

0

CSS Hover should work?

 .overlay:hover {
    background: url("/your/img.png");
 }

answered Dec 18 '12 at 04:13

Jamund Ferguson

16,721
3
42
50

That would just change the background image of the div. If that div already has a background image, this would change it. I also need it to overlay the div and anything inside it, not be in the background. – Steven Dec 18 '12 at 04:19

Overlay image on hover, on dynamically-sized div

2 Answers2

Linked