Make list images clickable Squarespace 7.1

Site URL: https://www.coastalgrain2.squarespace.com.au

I want to make a set of 'list' images clickable without using a button, also happy for the whole card area to be clickable.

Can someone help me out?

Clickable to where?  You can edit and  make an image/card image clickable and the text clickable to another page or web address. 

Add buttons, then add this code to Design > Custom CSS to turn button link to image & make buttons invisible

/* Make list images clickable */
li.list-item {
    position: relative !important;
}
.list-item-content__button-container {
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
a.list-item-content__button.sqs-block-button-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
}

Is it possible to make it clickable without adding buttons?

7 hours ago, markadekoning said:

Is it possible to make it clickable without adding buttons?

You can add buttons, the code will hide buttons then.

Thanks, that has had the desired effect!

The only issue I'm having now is a black border around every list item on the site - see image.

Any quick fix for this?

Cheers.

All good just added:

border-color: transparent !important;

Fixed.

Thanks again.

On 6/12/2022 at 9:36 PM, tuanphan said:

Add buttons, then add this code to Design > Custom CSS to turn button link to image & make buttons invisible

/* Make list images clickable */
li.list-item {
    position: relative !important;
}
.list-item-content__button-container {
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
a.list-item-content__button.sqs-block-button-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
}

 

Strange! This works but makes one of my images smaller because her name is shorter. When I add text to the title the images grow larger. 

https://www.fourcornerswellbeing.com/home-copy

password:demo

On 2/24/2023 at 6:16 AM, nicolettely said:

Strange! This works but makes one of my images smaller because her name is shorter. When I add text to the title the images grow larger. 

 

https://www.fourcornerswellbeing.com/home-copy

password:demo

 

 

 

It looks fine to me

On 6/12/2022 at 9:36 PM, tuanphan said:

Add buttons, then add this code to Design > Custom CSS to turn button link to image & make buttons invisible

/* Make list images clickable */
li.list-item {
    position: relative !important;
}
.list-item-content__button-container {
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
a.list-item-content__button.sqs-block-button-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
}

 

is it possible to add a hover effect to the images so that the users can quickly distinguish that it is a clickable link? I would love to add an image that pops up behind it on the hover, but if that is too complex just an outline or opacity change would work.

On 3/26/2023 at 11:59 PM, shelbyodom said:

is it possible to add a hover effect to the images so that the users can quickly distinguish that it is a clickable link? I would love to add an image that pops up behind it on the hover, but if that is too complex just an outline or opacity change would work.

Add this under

li.list-item:hover img {
	opacity: 0.5;
}

On 3/29/2023 at 11:43 PM, tuanphan said:

Add this under

li.list-item:hover img {
	opacity: 0.5;
}

 

This is awesome, thank you! Is there a way for me to make the hover use an icon with a transparent background?

On 3/31/2023 at 6:21 PM, shelbyodom said:

This is awesome, thank you! Is there a way for me to make the hover use an icon with a transparent background?

Hi,

make the hover use an icon  > What do you mean? Can you share link to your site?

16 hours ago, tuanphan said:

Hi,

make the hover use an icon  > What do you mean? Can you share link to your site?

https://www.communitypreschoolhuntersville.com/

I was able to make the images clickable to other pages, but when i hover over the image there is an opacity fill (shown in the screenshot, the nursery image has an opacity). But I would like the image of the little baby to change to a different image on hover, but I haven't figured out the trick since these images are nested in a list item.

On 4/6/2023 at 12:41 AM, shelbyodom said:

https://www.communitypreschoolhuntersville.com/

I was able to make the images clickable to other pages, but when i hover over the image there is an opacity fill (shown in the screenshot, the nursery image has an opacity). But I would like the image of the little baby to change to a different image on hover, but I haven't figured out the trick since these images are nested in a list item.

Add to Design > Custom CSS

.user-items-list-item-container[data-section-id="64206f28e6cce449d506a051"] {
li:nth-child(1):hover img {
    content: url(https://cdn.pixabay.com/photo/2023/03/22/20/16/muffin-7870491_640.jpg);
}
li:nth-child(2):hover img {
    content: url(https://cdn.pixabay.com/photo/2023/03/26/17/51/birds-7878846_1280.jpg);
}
li:nth-child(3):hover img {
    content: url(https://cdn.pixabay.com/photo/2023/01/24/17/27/flower-7741687_640.jpg);
}
li:nth-child(4):hover img {
    content: url(https://cdn.pixabay.com/photo/2023/02/01/17/58/cactus-7760970_640.jpg);
}
li:nth-child(5):hover img {
    content: url(https://cdn.pixabay.com/photo/2022/10/09/11/30/spider-7508942_640.jpg);
}}

On 4/7/2023 at 10:43 PM, tuanphan said:

Add to Design > Custom CSS

.user-items-list-item-container[data-section-id="64206f28e6cce449d506a051"] {
li:nth-child(1):hover img {
    content: url(https://cdn.pixabay.com/photo/2023/03/22/20/16/muffin-7870491_640.jpg);
}
li:nth-child(2):hover img {
    content: url(https://cdn.pixabay.com/photo/2023/03/26/17/51/birds-7878846_1280.jpg);
}
li:nth-child(3):hover img {
    content: url(https://cdn.pixabay.com/photo/2023/01/24/17/27/flower-7741687_640.jpg);
}
li:nth-child(4):hover img {
    content: url(https://cdn.pixabay.com/photo/2023/02/01/17/58/cactus-7760970_640.jpg);
}
li:nth-child(5):hover img {
    content: url(https://cdn.pixabay.com/photo/2022/10/09/11/30/spider-7508942_640.jpg);
}}

 

One more follow-up question, this code worked great, but the images are getting cut on the hover. Is there a way to fix this with code or should i upload specific images for this? They are getting cut to fit into the circle shape, but I would like to show the whole image and not the cut circles.

On 4/11/2023 at 6:10 AM, shelbyodom said:

One more follow-up question, this code worked great, but the images are getting cut on the hover. Is there a way to fix this with code or should i upload specific images for this? They are getting cut to fit into the circle shape, but I would like to show the whole image and not the cut circles.

Try adding this code under

.user-items-list-item-container[data-section-id="64206f28e6cce449d506a051"] li:hover img {
    object-fit: contain !important;
    height: auto !important;
    min-height: unset !important;
    width: 90% !important;
}

I used this code @tuanphan and it works beautifully as long as there's an image but when I just have text, the active area is all off.

Page is: https://m-contemporary-art.squarespace.com/browse-artwork-online

password: waylan2022

In the Browse Work by Artist section. Can you advise on how to get the code so the correct name is clickable and goes to the right page? Right now for example I can't click on 'Carla Anderson' but if I click on the name below 'Taurus Burns' it links to her page of work.

Thank you!!

CSS used:

/* Make list images clickable */
li.list-item {
    position: relative !important;
}
.list-item-content__button-container {
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
a.list-item-content__button.sqs-block-button-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
}

On 5/13/2023 at 1:46 AM, Emilydelh said:

I used this code @tuanphan and it works beautifully as long as there's an image but when I just have text, the active area is all off.

Page is: https://m-contemporary-art.squarespace.com/browse-artwork-online

password: waylan2022

In the Browse Work by Artist section. Can you advise on how to get the code so the correct name is clickable and goes to the right page? Right now for example I can't click on 'Carla Anderson' but if I click on the name below 'Taurus Burns' it links to her page of work.

 

Thank you!!

 

CSS used:

/* Make list images clickable */
li.list-item {
    position: relative !important;
}
.list-item-content__button-container {
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
a.list-item-content__button.sqs-block-button-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
}

Add this code under

a.list-item-content__button.sqs-block-button-element {
    padding: 0 !important;
}
.list-item-content__button-container {
    margin: 0 !important;
}

here is another solution! 

<!--Make list items clickable-->
<script>
    // JavaScript code to link list-item-media to the closest button
    document.addEventListener("DOMContentLoaded", function() {
        var listItems = document.querySelectorAll('.list-item');

        listItems.forEach(function(listItem) {
            var media = listItem.querySelector('.list-item-media');
            var closestButton = listItem.querySelector('.list-item-content__button');

            if (media && closestButton) {
                media.addEventListener('click', function() {
                    closestButton.click(); // Trigger button click when list item media is clicked
                });
            }
        });
    });
</script>