Making Gallery Images Clickable / Linkable After Hover Effects Have Been Added With CSS

Hi all.

I have added some custom CSS so that hovering over images in a Grid: simple gallery will make captions and a colour overlay appear.

The effect works well. However, now the images are no longer clickable/linkable. 

As other users have noted, it seems like something in the code is disabling the normal spotlight/link function for the images.

Below is the code I am using.

Thanks for your help!

 

 

.gallery-caption {

position: absolute;

 top: 0; 

 left: 0; 

 background: rgba(32,28,105,0.9); /* overlay color */ 

height: 100%;

padding: 0;

opacity: 0;

}

.gallery-caption-wrapper {

 display: flex;

  align-items: center; /* center .vertically */

  justify-content: center; /* center

  .horizontally */

 }

.gallery-caption-content {

 font-size: 1rem :important; /* caption

  font size */

  color: white; /*caption font color */

}

.gallery-grid-item {

  position: relative;

 }

.gallery-grid-item:hover .gallery-caption {

  opacity: 1;

}

.gallery-caption-grid-simple {

 transition-delay: 0ms

}

 

p.gallery-caption-content {

font-family: Jeff-Script!important;

}

 

figcaption.gallery-caption.gallery-caption-grid-simple {

p {

  font-size: 130%;

  font-weight: 500;

  }

}

 

figcaption.gallery-caption.gallery-caption-grid-simple {

    position: absolute;

    text-align: center;

}

 

 

On 7/19/2023 at 5:08 PM, tuanphan said:

Change your first code, from this

.gallery-caption {

position: absolute;

 top: 0; 

 left: 0; 

 background: rgba(32,28,105,0.9); /* overlay color */ 

height: 100%;

padding: 0;

opacity: 0;

}

to this

.gallery-caption {

position: absolute;

 top: 0; 

 left: 0; 

 background: rgba(32,28,105,0.9); /* overlay color */ 

height: 100%;

padding: 0;

opacity: 0;
pointer-events: none;

}

(I added pointer-events: none;)

Thank you so much. That has solved the issue, HUGELY appreciate your help tuanphan

Hi @tuanphan, I stubbled across your edited code here to allow you to hover over the gallery image, revealing color overlay w text caption and clickable link. I added it on the backend but doesn't seem to be working. Any suggestions? Thanks 

On 8/1/2023 at 5:10 AM, designone said:

Hi @tuanphan, I stubbled across your edited code here to allow you to hover over the gallery image, revealing color overlay w text caption and clickable link. I added it on the backend but doesn't seem to be working. Any suggestions? Thanks 

Can you share link to page where you use gallery? We can take a look