Jump to content

Clickable image blocked by caption

Recommended Posts

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

Link to comment
  • Replies 7
  • Views 775
  • Created
  • Last Reply

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

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.