Jump to content

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

Recommended Posts

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

 

image.thumb.png.c69f8dfce5b4d244cc279da2c0ffb72a.png

acoustic_guitar_002.png

Link to comment
  • Replies 4
  • Views 588
  • Created
  • Last Reply

Top Posters In This Topic

> 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);
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.