Disable image click-through but keep hover

Site URL: https://echidna-gardenia-fcb4.squarespace.com/

I was wondering if there was a way to disable an image click-through while still keeping the hover effect?

This is for a specific image on my site. I have set pointer-events to 'none' which disables the link, however removes the hover text. I can make the hover text visible again using the following code, however this is fixed in place on the image and the 'hover' effect is disabled. 

Is it possible to set pointer-events: none but keep the hover?

Code:

 a.grid-item[href*="/comingsoon"] {pointer-events: none; }   //disables click-through but removes hover//

a.grid-item[href*="/comingsoon"] .portfolio-text {opacity: 1 !important;} //reinstates hover text but text is fixed e.g. no hover//

What is access password?

It's linenewpassword - thank you!

I think you need to use jQuery in this case. Do you use Personal or Business Plan?

@tuanphanfirstly, thank you for all your help on this forum. I have already found LOADS of solutions thanks to your various replies.

I'd like to bump this thread though. I have the same issue but can't quite find an answer. 

I want to disable click-throughs but maintain hover-overs for specific portfolio blocks on the grid.

Any pointers??

thanks!

On 1/30/2021 at 12:41 AM, cpearedesign said:

@tuanphanfirstly, thank you for all your help on this forum. I have already found LOADS of solutions thanks to your various replies.

I'd like to bump this thread though. I have the same issue but can't quite find an answer. 

I want to disable click-throughs but maintain hover-overs for specific portfolio blocks on the grid.

Any pointers??

thanks!

Can you share site url? We can check easier

@tuanphan I am trying to do the same thing!! On a portfolio page I need to disable specific links but keep the overlay and hover effects. 

I tired this: but it does nothing:

<a href="https://corn-apricot-zn88.squarespace.com/portfolio-2-1/project-two-mtr8w" class="thisLink">Link</a>

<style>
  .thisLink {
       pointer-events: none!important;
       cursor: default;
    } </style>

20 hours ago, deaton72 said:

@tuanphan I am trying to do the same thing!! On a portfolio page I need to disable specific links but keep the overlay and hover effects. 

I tired this: but it does nothing:

 

<a href="https://corn-apricot-zn88.squarespace.com/portfolio-2-1/project-two-mtr8w" class="thisLink">Link</a>

<style>
  .thisLink {
       pointer-events: none!important;
       cursor: default;
    } </style>

 

 

 

Can you share site url?

3 hours ago, tuanphan said:

Can you share site url?

https://corn-apricot-zn88.squarespace.com/   no PW.

The page is People-test under the menu. 

@tuanphan @cpearedesign

This has been my big issue with a people page with only management having click-throughs. I tired portfolio page and gallery, but the overlay isn't what we want. This is how I solved the "turn off the clickthrough, but keep the hover effect." It also change she cursor only to a hand whe there is apointer-event.

after dozens of tries, all I did was target the summary-title-link and it worked like magic!

This works on the summary block, so maybe a few tweaks would make it work on other blocks.

.summary-title-link {cursor:pointer!important;}

.summary-title-link[href*="/url"] {pointer-events: none;}   //disables click-through  

To keep the click through, just type "all"

@tuanphan @Sara_SQSP hey! I was redirected to this thread because of my similar question.  Are you a squarespace moderator who helps out? Thank you!!!  I have a business account and I want to make a portfolio page that keeps the overlay hover effect with text (to show the title of my artwork) on the image but I want to disable the click through to the project page. Instead when clicking on the photo (artwork) I want it to show a reel like the gallery images do. However the image gallery page has no overlay with text on the image. I'm also okay with creating the overlay hover with text on the photo in the image gallery page. Also, ideally I want the overlay to show a transparant color when hovering. Is this possible? Basically the features I'm describing, I want to create a similar look to this layout attached in the pictures .... Is this something you can help (code?) me with? Thank you so much for your help!! Much appreciated.

@Malou Can you share url?

Hey! Check our private messaging. Sent my url and some more information.