Jump to content

Remove Hover & URL Links

Recommended Posts

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! 

Screen Shot 2020-09-03 at 11.25.55.png

Screen Shot 2020-09-03 at 11.25.43.png

Link to comment

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

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
  • 6 months later...
  • 2 weeks later...
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

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
  • 2 months later...
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

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
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

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

@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
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>

 

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
  • 6 months later...
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

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

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
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

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

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.