Home/ Questions/Q 8617693
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T05:55:24+00:00

I’m working on an image collage on a website and would like each image

  • 0

I’m working on an image collage on a website and would like each image to have an overlay smoothly transition in whenever the user hovers over an image. This overlay should be slightly transparent and contain text and buttons. Here is my progress so far: http://classicopia.ivointeractive.com/

Each image is wrapped in a ‘product’ div and each product div should contain an img and a ‘productOverlay’ div that comes up on hover. Right now, the bookcase is the only item that has an overlay attached to it – you can’t see it though, thats one of the problems

I am stuck on two problems right now:

  1. How do I make the overlay visible? There are no rules making it invisible right now, the only thing I can do to see it is set its positioning to absolute, but that messes up its dimensions.

  2. How can I get the overlay to actually be over the image? (Right now it gets placed below it)

I have jQuery loaded in already so any solutions using that would be fine too. Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The parent div will need to be relative and the child div will need to be absolute or fixed. You will then need to add top: 0; and left: 0; as well as z-index: 1; to the CSS for the child div. Then use jQuery to show and hide on hover.

    • 0