Image opacity on hover without affecting clickthrough URL

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

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