Image Blocks with hover overlay (same as for Portfolio)

Hi

I have looked for some solution to this issue for 2 days straight and have not found a solution so I hope you can help me here.

I need to have a Portfolio with 3 layers (Type of Photography --> Location --> Actual pictures). But Squarespace only supports Portfolios with 2 Layer (e.g. Location --> Actual pictures). So my solution was to add a section with 4 Image Blocks (for Landscape, Animals, Culture and Personal and link each of them to a Portfolio Page. The issue I have right know is that it should look consistent and I am using a mouse hover overlay for the portfolio (with the title of the portfolio displaying --> see attachment).

I tried to add this hover overlay with custom css to the 4 image blocks with the "content" attribute in css for a title for each of the 4 separately. But have not been able to get it working properly (mostly because I am not 100% sure how I can select the areas correctly, but also because the "content" attribute only seems to work for one picture at a time. 

So I am wondering if there is some other option to get this done and if not, if I could somehow add the same functionalities as in the portfolio hover overlay to my images?


I have a second issue (its not that important but would be nice): I wanted to add the Portfolio Overview (e.g. like in the screenshot) to the footer or the bottom of each Portfolio page, so people can click on a different Portfolio directly when finished scrolling the page. But it seems like Portfolio pages cannot be saved/stored (no idea why....). So any idea how to do that? If I do it with images I would need to recreate the whole Portfolio page and then run into the same issue with the hover overlay as described above.

After using Wordpress for years I feel pretty limited for already basic things (no animations/hover effects for pictures??), but Squarespace it is better maintainable and more appealing to the eye while working on the page so I wanted to give it a try.

Thank you a lot for your help and have a great day
Daphni

Hi,

Instead of using Image Blocks, you can consider using Gallery, we can achieve Hover effect easier

Also, if you want to use Image Block, you should add Classic Editor Section, then add Image Block, you will achieve overlay with code easier (Add Blank Classic Editor in screenshot)

Thanks for the hint. So if I understand correctly I still would need to use custom css, but it is easier with the gallery or "old" image block? Do you have any idea or hint how to focus a single picture in the gallery block for custom css? Thank you 🙂