Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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



Share this post

Link to post

Can you share link to page where you use image block?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...