Jump to content

Image Hover Overlay to be responsive


wega

Recommended Posts

Hi, 

I tried to create an Image Overlay effect - 'Fade in a Box' as explained here: https://www.w3schools.com/howto/howto_css_image_overlay.asp. Everything worked but I have more text in it than just a name. When I resize my browser the overlay effect becomes bigger than the original image (especially the height), the same as it does when you resize the browser here https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_opacity (here it's the width that's bigger). Does anyone know how to solve this?

Thank you 

 

Link to comment
Share on other sites

I'm not seeing the issue in the example page. I tested in Firefox, Chrome and IE11. It works down to 320px wide, which is the width of the smallest phones today.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...