Custom CSS Caption, Rollover Effect Disabled Link

Hi all,

I've been trying to put together some custom CSS to give my images a rollover effect in which the captions appear on top of the image with a dark overlay (shown in the attached images). I'm by no means a CSS expert, so I've been compiling code from different forums, and put together this:

.layout-caption-overlay-hover .image-caption-wrapper {background:#000000; opacity: .95 !important; min-height: 100%; top:0!important}  
 .layout-caption-overlay-hover .image-caption-wrapper h1, .layout-caption-overlay-hover .image-caption-wrapper p{color:#ffffff!important;  text-align: center !important} 

.image-caption {
 left: 50%;
 position: absolute;
 top: 50%;
 width: 80%;
 -webkit-transform: translate(-50%,-50%);
 -ms-transform: translate(-50%,-50%);
 transform: translate(-50%,-50%);
} p {
 font-size: 21px !important;
 font-weight: semibold !important;
 color: #ffffff !important;
 text-transform: uppercase; 
 line-height: 120% !important;
 letter-spacing: 2px !important;
 opacity: 1 !important
}

The issue is that it disables the image link, so my images don't take you anywhere. What can I add to the code to fix this?

Thanks!

Hi Jennegel,

Here's some code that I've written before for rollover effects - the link should still works with this code.

/*rollover image effect*/
.image-block figcaption{
  opacity: 0;
}
/*on hover*/
.image-block:hover figcaption{
  opacity: 1;
}
.image-block:hover img{
  filter:brightness(40%);
}
/*transition*/
.image-block figcaption, .image-block:hover img, .image-block img, .image-block:hover figcaption{
  transition: .5s;
}

Try this CSS

.image-caption p, .image-caption {
	pointer-events: none;
}

If it doesn't work, can you share link to page where you use image block?