Jump to content

Image opacity on hover without affecting clickthrough URL

Recommended Posts


I have a hyperlinked image block where I'd like for the below to happen upon hover:

- Text to appear over the image

- White opacity over image

I've managed to get this to work using the below CSS code however it seems to have messed up the image clickthrough function. I believe the problem is specifically with the white opacity over image which seems to be disabling clickthrough function. 


Here's the code I'm using...

p, h1, h2, h3 {

-webkit-hyphens: manual !important;


-moz-hyphens: manual !important;


-ms-hyphens: manual !important;


hyphens: manual !important;



.design-layout-poster .image-card-wrapper {

  visibility: hidden;

  opacity: zero;



.design-layout-poster:hover .image-card-wrapper {

  visibility: visible;

  opacity: 1;




.image-block .image-linked:before { content: "";width: 100%;height: 100%;position: absolute;z-index: 1;top: 0;left: 0; opacity: .6;background:; }

.image-block .image-linked:hover:before {background: white;opacity: .3;transition: all .2s ease-in-out; }



Link to comment
  • Replies 1
  • Views 509
  • Created
  • Last Reply


This topic is now archived and is closed to further replies.

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