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

fortheloversphoto

Member
  • Content Count

    2
  • Joined

  • Last visited

  1. 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; } }
  2. 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.
×
×
  • Create New...