Hello Pro-Team,
what is the best way to do this?
I am trying to create responsive grid with images, that link to the corresponding photo story.
On screens with a wider resolution it should be a 4-column-layout, on mobiles a 1-column-layout. The image size is for all screen-sizes 144 x 144 px, the gap between the images is always 48 px.
On mouseover the images should darken with a transparent overlay and a text appear the image.
Clicking on the image should lead to the photo story.
I don’t need any sorting function.
I tried The Grid plugin. That worked in terms of overlay. Resizing of the window however led to some scaling of the image.
Taking image elements as a base for it worked fine in terms of the responsive behaviour, exactly as intended.
But I only find the link addition as an option. To create a text overlay I found only the suggestion here in the forum, to use the alt-text for this text overlay. But I need 3 - 4 lines of text that I also can format. And I miss the option to darken the image for better readability of the text on the image.
Trying to customize the button element was not successful too.
At the moment, I am thinking of the content area as a solution for my problem. Is this the way to create an image link as intended? How can I create such a link and use it as a preset?
Thank you in advance for your help.
Franz