I got it the way I want it! To see this code in action, see Heart & Dash Portfolio.
If you want this code to work, do not use an image grid. Instead, create your own 'grid' by simply inserting multiple image blocks.
You'll insert this code by going to "Design" then "Custom CSS":
.image-caption-wrapper {
opacity: 0;
text-align: center !important;
top: 0 !important;
position: relative;
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: #ea4e4c !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: #fddcce;
opacity: .9;
}
The nice thing about this is that you can customize the color of the caption/type (I used #ea4e4c) that appears on hover and you can also customize the color of the background (I used #fddcce). You can customize those hex color codes for yourself.
For me, this is a total solution!
