Site URL: https://www.stonewoodny.com/home-test
Hi all! I have been trying to create a custom css code that would allow these 3 images on my home page to dim on hover and have the image-subtitle come up on hover. So far my code works with that! However my image-subtitle code has links to other pages, once I hover over the hyperlinks it breaks the background image's overlay opacity hover effect.
Also ideally the image would function like the image attached. The main title would be constant on the image centered, once hovering over the image a darker background comes through and dims the image making the text pop more, the subtitle links would appear and be clickable. Also having the subtitle links closer to the bottom would be nice, but whenever I code "margin-bottom: 0%!important;" or anything of that matter, it doesn't work. I'm happy to explain more and welcome any help or advice!! Thank you, here is my custom code so far:
<style>
.light .sqs-block-image .design-layout-poster .image-overlay{
opacity: .2;
}
.light .sqs-block-image .design-layout-poster .image-overlay:hover{
opacity: .8;
transition-duration: .5s;
}
.image-subtitle-wrapper {
opacity: 0;
pointer-events: none;
}
/* this is a current workaround to view the subtitle text, but I would rather have the whole image have an overlay */
.image-subtitle-wrapper a{
padding: 2px 6px 7px 6px;
border-radius: 2px;
}
.image-subtitle-wrapper:hover {
background-color: rgba(52, 44, 39, .8)
}
/* show subtitle on hover */
.image-block:hover .image-subtitle-wrapper {
opacity: 1;
transition-duration: 0.5s;
}
</style>
