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

[Dgbanana]

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!

[Ingolme]

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

[Dgbanana]

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!

[patischof]

The abundance of large, high-resolution images can greatly burden the page, so it`ll be slow to open and long loading.

[patischof]

Let me start with an easy one – it`s important to correctly specify the path to the graphic file so it`ll be displayed correctly on your page. The abundance of large, high-resolution images can greatly burden the page, so it`ll be slow to open and long loading. You can do this way - pre-crop the image in the [link removed], and only then insert the necessary code. Also, to avoid this, place on a page of small pictures, which, when you click, turn into large. To do this small image must be made a link using tag, I hope you remember which code it`s. I tried that way, it worked for me.

Edited November 1, 2021 by Ingolme
Removed advertising link