markadekoning Posted June 13, 2022 Share Posted June 13, 2022 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? Link to comment
derricksrandomviews Posted June 13, 2022 Share Posted June 13, 2022 (edited) Clickable to where? You can edit and make an image/card image clickable and the text clickable to another page or web address. Edited June 13, 2022 by derricksrandomviews Link to comment
tuanphan Posted June 13, 2022 Share Posted June 13, 2022 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; } sarawhite and thedesigndaily 2 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
markadekoning Posted June 13, 2022 Author Share Posted June 13, 2022 Is it possible to make it clickable without adding buttons? Link to comment
tuanphan Posted June 13, 2022 Share Posted June 13, 2022 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. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
markadekoning Posted June 27, 2022 Author Share Posted June 27, 2022 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. thedesigndaily 1 Link to comment
markadekoning Posted June 27, 2022 Author Share Posted June 27, 2022 All good just added: border-color: transparent !important; Fixed. Thanks again. tuanphan 1 Link to comment
nicolettely Posted February 23 Share Posted February 23 (edited) 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 Edited February 23 by nicolettely added image Link to comment
tuanphan Posted February 27 Share Posted February 27 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
shelbyodom Posted March 26 Share Posted March 26 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. Link to comment
tuanphan Posted March 30 Share Posted March 30 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; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
shelbyodom Posted March 31 Share Posted March 31 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? Link to comment
tuanphan Posted April 5 Share Posted April 5 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
shelbyodom Posted April 5 Share Posted April 5 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. Link to comment
tuanphan Posted April 8 Share Posted April 8 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); }} Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
shelbyodom Posted April 10 Share Posted April 10 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. Link to comment
tuanphan Posted April 13 Share Posted April 13 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; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Emilydelh Posted May 12 Share Posted May 12 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; } Link to comment
tuanphan Posted May 14 Share Posted May 14 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; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment