Move link hover overlay above image

[chrusli]

I have a productlist with a hover overlay covering each product area. I try to cover the product picture with the transparent overlay (so that the white edges around the product picture is equally gray like the rest of the areay. I tried to get it to work with z-index, but I failed.

Here is my codepen: https://codepen.io/chrusli/pen/oPeqjy?editors=1100

I appreciate your help!

[cleverquestion]

Your image has a white background, there’s nothing you can do with code that will get rid of it. Here is a link to your image that I took the background out of: https://s3-us-west-2.amazonaws.com/random-art/shoe-no-bg.png.

Replace your shoe images with this and the problem will solve itself. Moving forward, all your images must have a transparent background (.png) for this effect to work.

[chrusli]

Thank you, I appreciate your help! I found examples that do that with images with white background. The trick is that the (very) transparent overlay is on top of the image. I managed to reproduce the effect in a simple setup, see here https://codepen.io/chrusli/pen/VGMJwy. I hope I will be able to apply this to the version with the carousel.

[Shikkediel]

You could use a pseudo element instead of changing the background:

.product-overlay {
   display: block;
   position: relative;
   color: black;
   text-decoration: none;

   &:hover:after {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      background-color: rgba(86, 86, 86, 0.03);
      transition: all .2s ease;
      z-index: 1;
   }
}

[chrusli]

Thanks! That did the trick. Do you know by any chance how you can still make the clickable elements under the pseude element accessible?

[Shikkediel]

You could add this to its style:

pointer-events: none;

https://caniuse.com/pointer-events

[chrusli]

Works like a charm. Thank you very much!

[Shikkediel]

Cheers, glad to help out.

[Author]

Posts