Clickable image blocked by caption

Site URL: https://wisteria-panda-z2eg.squarespace.com/projects

pw for website: rotorrotor

Dear All,

I managed to position my captions to be centered  (actually not quite centered, they jump up and down according to display size, but good enough..) on gallery images and appearing on hover:

https://wisteria-panda-z2eg.squarespace.com/projects (pw: rotorrotor)

However, only the part of the image is clickable (links to another page) that is not covered by the caption. How do I get the entire image to be clickable?

Thanks a bunch!!
Gregor

Add to Home > design > Custom CSS

/* Make caption clickable */
.gallery-caption p.gallery-caption-content {
    pointer-events: none;
}

Amazing!!

Anyway to position the caption exactly in the center of image? I messed around with the code, but can't seem to figure it out.

Thanks a bunch!
Gregor

Hi @Tonmeister
Please comment every custom code you made for changing the position of captions and send me your result via DM.

This is my final code result!

Please use the like button if it helps you!

Best,
Leopold

Dear @IXStudio,

This is the Code I currently have on the gallery:

The .gallery-caption-content part is where the captions are supposed to center, but my method does not do the trick (looks right on one display size and wrong on the next).

[data-section-id="5ecfd6bf2264504f05940ef4"], [data-section-id="5f54acf2f7214e5c428462e2"], [data-section-id="5f560c836cd6b40f39b58a23"]{
  figure.gallery-grid-item {
    margin-top: 0px;
    margin-bottom: -0.4em;
  }
  figure.gallery-grid-item .gallery-grid-item-wrapper a:before {
    background-color: rgba(40,0,0,0.7);
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    opacity: 0;
    transition: all .5s
  }
  figure.gallery-grid-item:hover .gallery-grid-item-wrapper a:before {
    opacity: 1;
    transition: all .5s
  }
  .gallery-caption p.gallery-caption-content {
    pointer-events: none;
  }
  .gallery-caption-content {
    position: absolute;
    text-align: center;
    top: 0%;
    width: 100%;
    bottom: 0;
    padding: 0% 0%; 
    box-sizing: border-box;
    top: -12em !important;
    height: 0px !important;
    font-size: 1.5em!important;
    font-weight: 500!important;
    text-shadow: 0px 0px 20px rgba(0, 0,     0, 1);
    visibility: hidden;
  }
  figure.gallery-grid-item:hover .gallery-caption-content {
    visibility: visible;
  }
  @media screen and (max-width:640px){
    .gallery-grid--layout-grid .gallery-grid-wrapper {
      grid-template-columns: repeat(2,auto) !important;
      padding-top: 20px;
      padding-bottom: 20px;
    }
  }
}

Can you help?

All the best,

Gregor

Hi,
At the first please comment all of your custom CSS like this 

/* CSS Here */

Let me know when you did it!

Please use the like button if it helps you!

Best,
Leopold

I just did, @IXStudio?

My Custom CSS is in my above post!

Best,

Gregor

Did you comment on your Design -> Custom CSS?