Jump to content

Image opacity on hover without affecting clickthrough URL

Recommended Posts

Hi, 

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. 

Help!

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
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

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.