Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
fortheloversphoto

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

Question

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.

Share this post


Link to post

1 answer to this question

Recommended Posts

  • 0

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;
  }
}

 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...