I’m trying to create a simple portfolio homepage, where a grid of images are responsive. (I currently have square images, with a grid x2 wide for large screens, x2 wide for medium screens and x1 wide for small screens). I achieved this easily by using columns with photo modules.
However, I would like text to overlay the centre of each image like this example https://lukegordondesign.com, but I don’t see how to do that with the caption options in the photo module. (I would like a hover effect on the image and click-through to a more detailed project page behind each image).
To get some text over the image, I tried setting a background image on a column and using a text module in the column. The column behaves as I want at large and medium screen sizes (it fills half of the screen width-wise and remains square as per the background image proportions), but as soon as I go to small screens (where the column becomes 100% width) I need to tell it to have a minimum height, and I cant work out how to get it to constrain to the height of the background image. Is this even possible?
Is there a better way to do what I want? Any help is very welcome as I’m totally new to BB and don’t know much CSS etc. yet.
(I’m using BB plugin with Astra theme by the way, in case I get any BB Theme-based responses).
Thank you.
Alex