How can I add a hyper link to the caption overlay/hover effect on an image block?

Site URL: https://fortheloversphoto.squarespace.com

Hi!

I've added CSS to my Image Blocks with the Caption Overlay (hover) effect to have a transparent overlay on the images. You can see the current style here: https://fortheloversphoto.squarespace.com

I just realized that the hyperlinked photo is now covered by the overlay effect, so there's not clickable area on the overlay. Is there a way I can add a link to the overlay itself, with just CSS? Specifically whatever the link is for the image? I want to make sure my users will be able to click through to the linked galleries.

I answered my own question! In case you're wondering how: targeting the link and making it a block allowed me to add padding and margin to make the clickable area bigger. 

I made sure to add padding and removed it from the margin to keep my elements in the same position. Also needed to hide overflow to prevent scroll bars. Hope this helps someone! "X" where you add in the number of em's you need to cover the whole space:

.image-caption-wrapper {
  overflow: hidden !important;
}

.image-caption a {
  display: block;
  padding: Xem;
  margin: -Xem;
}

Here is the complete snippet for the overlay effect on my website, in case you're curious:

//HOVER ON IMAGE OVERLAY//
@media screen and (max-width: 1024px){
   .image-caption-wrapper {
     position: absolute;
     visibility: visible !important;
     opacity: 1 !important;
     text-align: center;
     background: hsla(115, 6%, 63%, 0.8) !important;
   	 overflow: hidden !important;
  }
  
  .image-caption a {
    display: block;
    padding: 2em;
    margin: -2em;
    text-decoration: none !important;
    color: white !important;
    font-family: Miller Display, serif;
    font-size: 1.8em;
    text-transform: lowercase;
    line-height: 1em !important;
  }
  
  .image-caption em {
    font-family: Catamaran, sans-serif;
    font-size: 0.45em;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none !important;
  }
}

@media screen and (min-width: 1025px) {
  .image-caption-wrapper {
    text-align: center;
    background: hsla(115, 6%, 63%, 1) !important;
    top: 0 !important;
    margin: auto;
    margin-left: 12%;
    margin-right: 12%;
    transition: 0.3s !important;
    position: relative;
  }
  
  .image-caption a {
    display: block;
    padding: 5em;
    margin: -5em;
    color: white !important;
    font-family: Miller Display, serif;
    font-size: 2em;
    text-transform: lowercase;
    line-height: 1em !important;
    text-decoration: none !important;
  }
  
  .image-caption p {
    display: block;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
  }
  
  .image-caption em {
    color: black !important;
    font-family: Catamaran, sans-serif;
    font-size: 0.45em;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: uppercase;
  }
}

Impressive!  @fortheloversphoto

Thank you for sharing this! Very helpful 👍