Jump to content

[help] CSS : Responsive Image Gallery + Image Overlay Title


Dgbanana
 Share

Recommended Posts

Hi all,

Since I am relatively new to CSS / HTML coding, I find the w3schools' online tutorial extremely useful.

However, I would like to combine the two tutorials that I have came across.

1) https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery_responsive

2) https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_title


My intention is the put 3 images per row (like instagram feeds) in one of my portfolio

I have tried to combine the CSS but the overlay .container doesnt seem to be overlaying on the image

https://www.w3schools.com/code/tryit.asp?filename=GSU5M70LOKO8

 

Hoping someone will know how to advise.

 

Thank you all in advance!

Link to comment
Share on other sites

The value of top has to be a number, it cannot be "absolute". "absolute" should be the value of the position property.

The element which wraps around the overlay should have a relative position.

I cut out some superfluous elements and changed some of the code back to what it was in the original W3Schools examples: https://www.w3schools.com/code/tryit.asp?filename=GSU8T8H7Z2IN

  • Thanks 1
Link to comment
Share on other sites

On 7/26/2021 at 12:01 PM, Ingolme said:

The value of top has to be a number, it cannot be "absolute". "absolute" should be the value of the position property.

The element which wraps around the overlay should have a relative position.

I cut out some superfluous elements and changed some of the code back to what it was in the original W3Schools examples: https://www.w3schools.com/code/tryit.asp?filename=GSU8T8H7Z2IN

Thank you. You are amazing!

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
 Share

×
×
  • Create New...