Jump to content

Image hover altered with code, and now won't clickthrough

Recommended Posts

Site URL: https://www.maggiebrz.design/work

Hi all,

 

1. I altered the hover state on my images to span the full image instead of just appear as a bar along the bottom. However, now it won't clickthrough! Anyone have tips? This is the code I'm using (i'm a rookie).

 

2.  It would be super cool to change the hover color, but that's a lot of asks...

 

.sqs-block-image .image-block-outer-wrapper:not(.image-block-v2).layout-caption-overlay .image-caption-wrapper p, .sqs-block-image .image-block-outer-wrapper:not(.image-block-v2).layout-caption-overlay-hover .image-caption-wrapper p {
  position: relative;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
    color: white;
    font-weight: 800;
      font-size: 1.5rem;
  text-align:center;
}

.sqs-block-image .image-block-outer-wrapper:not(.image-block-v2).layout-caption-overlay .image-caption-wrapper, .sqs-block-image .image-block-outer-wrapper:not(.image-block-v2).layout-caption-overlay-hover .image-caption-wrapper {
    position: absolute;
    top: 0px;
    padding: 20px;
}

.sqs-block-image .image-block-outer-wrapper:not(.image-block-v2).layout-caption-overlay-hover:hover .image-caption-wrapper, .sqs-block-image .image-block-outer-wrapper:not(.image-block-v2).layout-caption-overlay-hover :focus+.image-caption-wrapper {
    max-height: 100%;
    opacity: 1;
    visibility: visible;
}

.sqs-block-image .image-block-outer-wrapper:not(.image-block-v2).layout-caption-overlay .image-caption-wrapper, .sqs-block-image .image-block-outer-wrapper:not(.image-block-v2).layout-caption-overlay-hover .image-caption-wrapper {
    background: #d78033;
    opacity:20%;
}

 

Thanks!

Maggie

Link to comment
  • Replies 1
  • Views 455
  • Created
  • Last Reply

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.