Hover over image + Click to enlarge (add carousel) for Simple List template

Site URL: https://thebasemesh.com/

Hi there,

I'm trying achieve a couple of things.

1) Add a hover over image for a Simple List template. 

2) Enlarging an image when clicked on.

I'm using a Simple List template with an image turned on. This seemed like the best template as I want access to the 'download' button which instantly downloads a ZIP file. 

What I'm trying to achieve is:

> Hover over the image to swap it out to a new one (a custom image)

> If you click on the image, it enlarges and you can swap between the original image as seen below, and the "hovered over" image

> Clicking outside of the newly opened image returns to the default page as seen below

I managed to find some form of solution for the Hover Over part, but it did it based off of nth-child - basically hard coding "Image1 swaps to this link",  so if I ever needed to rearrange the order of icons I'd have to manually set up the links again. Ideally it'd be based off of an ID so if I arranged it alphabetical, the ID is retained.  

I'm really new to squarespace and CSS so any help would be greatly appreciated. I've attached a hover over image of what I'd expect it to look like when active. 

Many thanks,

Tim

Sorry, forgot to put this in. Password is: GreyHouse157

Hi,

Which page are you referring to? I don't see it on homepage

Ah I'm sorry. It's the 'Model Library'

> Hover over the image to swap it out to a new one (a custom image)

If you use Summary Block, there is a plugin to achieve this.

With current layout, you will need a lot of code.

Add to Design > Custom CSS for first 3 images

/* Modern Library */
.user-items-list-item-container[data-section-id="627cb6a470a83f0d978d6673"] {
li:nth-child(1):hover img {
    content: url(https://cdn.pixabay.com/photo/2022/05/10/11/12/tree-7186835__480.jpg);
}
li:nth-child(2):hover img {
    content: url(https://cdn.pixabay.com/photo/2022/05/05/14/57/rice-7176354__340.jpg);
}
li:nth-child(3):hover img {
    content: url(https://cdn.pixabay.com/photo/2022/05/16/18/17/sheep-7200918__340.jpg);
}}