css_charlotte Posted September 3, 2020 Share Posted September 3, 2020 Site URL: https://echidna-gardenia-fcb4.squarespace.com I'm using the Pazari template and am looking to remove some of the hover links on select images on the main portfolio page. For example, when you hover over one of the project images, the name of the project appears and this is then clickable (takes you through to a detailed page on this project). I need this feature on some of the images, but for others I want to remove both the text and the clickable link so these appear as a flat image only. Does anyone know if this is possible and how you create custom code for this? Assuming this code will need to apply to each individual image which is uploaded and I'm not sure if you can separate them? Any help on this would be great! Examples below showing how the text appears when you hover over the image and site link is: https://echidna-gardenia-fcb4.squarespace.com Thanks! Link to comment
tuanphan Posted September 3, 2020 Share Posted September 3, 2020 What is access password? 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
css_charlotte Posted September 3, 2020 Author Share Posted September 3, 2020 It's linelogin - thank you! Link to comment
tuanphan Posted September 4, 2020 Share Posted September 4, 2020 Add to Home > Design > Custom CSS a.grid-item[href*="/philliplim"] { pointer-events: none; } a.grid-item[href*="/gallerytop"] { pointer-events: none; } Repeat for other items adrianadelgiudice 1 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
css_charlotte Posted September 4, 2020 Author Share Posted September 4, 2020 This worked perfectly, thank you so much! Link to comment
adrianadelgiudice Posted March 31, 2021 Share Posted March 31, 2021 Hi! Thank you for this code, it's worked perfectly. Do you know how you can keep the hover and title on the image however disable the link? My client is trying to bulk up their projects page with imagery without creating pages for each. My website is: https://lynx-copper-kklb.squarespace.com/portfolio Password: whitepaper Link to comment
tuanphan Posted April 10, 2021 Share Posted April 10, 2021 On 3/31/2021 at 10:22 AM, adrianadelgiudice said: Hi! Thank you for this code, it's worked perfectly. Do you know how you can keep the hover and title on the image however disable the link? My client is trying to bulk up their projects page with imagery without creating pages for each. My website is: https://lynx-copper-kklb.squarespace.com/portfolio Password: whitepaper Hi. Incorrect password. Can you check it again? 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
DevonHarris Posted July 9, 2021 Share Posted July 9, 2021 hey @tuanphan can you check out BAHFineart.com - under the porfolio and archives section- artist just wants to show her artwork and their titles but not link it to a new page. Any way to do this? Thanks so much!! Link to comment
tuanphan Posted July 11, 2021 Share Posted July 11, 2021 On 7/9/2021 at 10:45 PM, DevonHarris said: hey @tuanphan can you check out BAHFineart.com - under the porfolio and archives section- artist just wants to show her artwork and their titles but not link it to a new page. Any way to do this? Thanks so much!! It looks like you solved this? 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
DevonHarris Posted July 14, 2021 Share Posted July 14, 2021 hey @tuanphan no I have not- if you click on the 'portfolio' thumbnail, it links to a new url. Any way to remove the pointer event and have it just stay on the portfolio page? Thanks!! Link to comment
tuanphan Posted July 14, 2021 Share Posted July 14, 2021 7 hours ago, DevonHarris said: hey @tuanphan no I have not- if you click on the 'portfolio' thumbnail, it links to a new url. Any way to remove the pointer event and have it just stay on the portfolio page? Thanks!! I see under Portfolio and Archives has 3 images, & I can't click on it. Did you solve? 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
DevonHarris Posted July 15, 2021 Share Posted July 15, 2021 @tuanphan sorry I sent you to the wrong page...if you go to www.BAHFineArt.com/portfolio, one painting is currently uploaded. If you click on the picture thumbnail, you are redirected to a portfolio sub page. I was able to target the overlay title text, but when I tried adding a "pointer events: none" to the CSS, it didn't work. I'm wondering if I can have it NOT direct to a sub page. Artist doesn't want to upload all of that info yet, just wants a simple portolio page with thumbnails and no redirect. Hopefully you can help! I feel like it's probably a Page Advanced Code Injection thing but I just can't figure out how to target it... Link to comment
tuanphan Posted July 15, 2021 Share Posted July 15, 2021 9 hours ago, DevonHarris said: @tuanphan sorry I sent you to the wrong page...if you go to www.BAHFineArt.com/portfolio, one painting is currently uploaded. If you click on the picture thumbnail, you are redirected to a portfolio sub page. I was able to target the overlay title text, but when I tried adding a "pointer events: none" to the CSS, it didn't work. I'm wondering if I can have it NOT direct to a sub page. Artist doesn't want to upload all of that info yet, just wants a simple portolio page with thumbnails and no redirect. Hopefully you can help! I feel like it's probably a Page Advanced Code Injection thing but I just can't figure out how to target it... Keep hover effect + remove link? Add this to Portfolio and Archives Page Header Code Injection <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('a.grid-item').removeAttr('href'); }); </script> creedon and hayleysb13 2 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
DevonHarris Posted July 15, 2021 Share Posted July 15, 2021 @tuanphan you're amazing, THANK YOU SO MUCH!!! Yay! For anyone else looking to disable portfolio sub pages, @tuanphan code enabled me to keep the project title on hover, but remove the linked sub-page. On hover, the thumbnail image shows the project title, but when clicked, it remains on the main portfolio page. Thanks again!!! Link to comment
jennyso Posted February 8, 2022 Share Posted February 8, 2022 Hi! I tried doing this for my website but it's not working for some reason? Site URL: https://www.alongsideworkshops.org/about I am trying to disable the links on a portfolio page so that they don't click through to other pages. The words that I don't want to be active links are "Community," "Creativity," and "Curiosity." The password is: nowornever Thank you so much! Link to comment
tuanphan Posted February 14, 2022 Share Posted February 14, 2022 On 2/9/2022 at 5:26 AM, jennyso said: Hi! I tried doing this for my website but it's not working for some reason? Site URL: https://www.alongsideworkshops.org/about I am trying to disable the links on a portfolio page so that they don't click through to other pages. The words that I don't want to be active links are "Community," "Creativity," and "Curiosity." The password is: nowornever Thank you so much! Add this code to Last Line in Code Injection > Footer <script> $(document).ready(function() { $('body#collection-61dfe40930b6d72ed30258cf a.portfolio-hover-item').removeAttr('href'); }); </script> 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
JSB1 Posted February 17, 2022 Share Posted February 17, 2022 Hi @tuanphan! I'd love your help as well! I'd like to remove the "feature image" hover style for mobile only. Is this possible? When you click into the projects on my site on mobile or tablet, the feature image is cropped weirdly, it shows at the bottom of each project page as well. site: jenaestone.com pw: Help123! Link to comment
tuanphan Posted February 18, 2022 Share Posted February 18, 2022 On 2/17/2022 at 10:53 AM, JSB1 said: Hi @tuanphan! I'd love your help as well! I'd like to remove the "feature image" hover style for mobile only. Is this possible? When you click into the projects on my site on mobile or tablet, the feature image is cropped weirdly, it shows at the bottom of each project page as well. site: jenaestone.com pw: Help123! For future comments, use this CSS @media screen and (max-width:900px) { .collection-images.index-nav-images { display: none; }} (it looks like I forgot add 900px query code when send code to your email) 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment