0

I want to highlight an image when a user hovers over it.

To do that, I'd like to put an overlay over everything else (or honestly, I'd be happy putting an overlay over everything including the image, and then putting something to brighten the image as well).

Is there anyway to do this without JS? I'm happy to use a JS solution if that's all that's available, but I was wondering if there was any CSS-only trickery that could manage to do this.

Example HTML would be like this:

<body>
<div>
<Other Elements />
<img src="...." />
</div>
</body>

Preferably everything would be darkened except the tag.

EDIT: THIS IS NOT a duplicate. It is very, very different from Overlay Images

Steven Matthews
  • 9,705
  • 45
  • 126
  • 232
  • You could do this by creating a whole page overlay and then changing the z-index of the image you are hovering over to 1 so that it sits on top of the overlay – Smokey Dawson Nov 29 '17 at 01:19
  • 1
    This kind of gets you close: https://jsfiddle.net/j9y6pyrq/1/ The hardest part is that images can't have pseudo elements, so a wrapper needs to wrap the image. And once you hover over the wrapper, and the pseudo element appears, it's part of the element, so there really isn't a `mouseout` state. Doing this with pure css might not be possible. – disinfor Nov 29 '17 at 02:29
  • That's pretty much the conclusion I've come to to. That's fine, I'll just write the script. It just seemed like the sorta thing that would be doable in CSS3. – Steven Matthews Nov 29 '17 at 02:32
  • @AndrewAlexander yeah, until a `parent` selector becomes a thing (if ever), I think we're stuck using JS. – disinfor Nov 29 '17 at 02:35

1 Answers1

1

If you wrap your image overlay image in a div container like so:

<div class="wrapper">
  <div class="other-content">
  </div>
  <div class="popup">
    <img src="...">
  </div>
</div>

You can use a pseudo element :before to style an overlay on your image.

.popup {

    img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
    }

    &:before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.8);
    }
  }

See example here:

https://codepen.io/dominicgan/pen/WXaXPy

dommmm
  • 899
  • 8
  • 16