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

Image Hover Overlay Text - tweak needed

Question

Site URL: https://www.joeblackham.com/work

Hey - I have 9 images on a page and I'm trying to get a hover effect which fills the entire image, but it's only covering the top 75% - any help would be appreciated as I'm not a CSS whizz! This is the code I am using at the moment:

.image-caption-wrapper {
 opacity: 0;
 text-align: center !important;
 top: 0 !important;
 width:100%;
 height:100;
  border: 2px solid white;
  padding: 1px;
  margin: 0px;
 position: center !important;
 pointer-events: none !important;
}

&:hover,
&:focus {
 opacity: 1;
}

.image-caption {
 left: 50%;
 position: absolute;
 top: 50%;
 width: 100%;
 -webkit-transform: translate(-50%,-50%);
 -ms-transform: translate(-50%,-50%);
 transform: translate(-50%,-50%);
   }

.image-caption p {
 font-size: 18px !important;
 font-weight: semibold !important;
 color: #ffffff !important;
 text-transform: uppercase; 
 line-height: 120% !important;
 letter-spacing: 2px !important;
 opacity: 1 !important;
}

.sqs-block.sqs-block-editable:not(.sqs-block-editing) .sqs-dd-invalid-handle {
 cursor: default;
 pointer-events: all !important;
}

.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .intrinsic .image-caption-wrapper .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper {
 background: #ffffff;
 opacity: .9;
}

Screen Shot 2020-06-04 at 23.25.26.png

Screen Shot 2020-06-04 at 23.27.45.png

Screen Shot 2020-06-04 at 23.27.39.png

Share this post


Link to post

1 answer to this question

Recommended Posts

  • 1

Add the following styles to override the .image-caption-wrapper:

.sqs-block-image .image-block-outer-wrapper:not(.image-block-v2).layout-caption-overlay-hover:hover .image-caption-wrapper {
  max-height: 100%;
}

 

Work_—_Joe_Blackham.png

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...