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"