av12 Posted February 13, 2022 Posted February 13, 2022 Greetings - I managed to put together some very rudimentary CSS code that display the text on an image block on hover over. But then I got stuck. Here is the code: /* Code for hover over v2 */ /* Remove square overlay from transparent images*/ #collection-620709cc26e4e10a4e555964 { .sqs-block-image .image-block-outer-wrapper.image-block-v2 .sqs-image-content::after, .sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-overlay { position: relative !important;} } #collection-620709cc26e4e10a4e555964 { /*Hide Title and Subtitle on load*/ .design-layout-poster .image-card-wrapper { visibility: hidden; opacity:0; transition-duration: 0.5s; } /* Generate the hover effect on hover */ .design-layout-poster:hover .image-card-wrapper { visibility: visible; opacity:1; background-color: hsla(321, 55%, 42%, 0.31); } /* Font format title */ .design-layout-poster .image-title p { color: white !important; text-transform: none !important; } /* Font format subtitle */ .design-layout-poster .image-subtitle p { color: white !important; text-align: left !important; text-transform: none !important; font-family: Arial, Helvetica, sans-serif; font-size: 1.4em !important; } /* Hide on mobile */ @media screen and (max-width:640px) { .design-layout-poster .image-subtitle p { display: none;} .design-layout-poster .image-subtitle p { display: none;} } } The issue that I have is that on mobile sometimes the square overlay stays on if I go "back" on the page; so the page loads correctly on mobile and displays all the images without any test or overlay background. But if I tap on the image / link and then swipe back the purple overlay it present over the image. It doesn't happen all the time. The goal is to have a simple hover over effect on a block image poster but then just display the image alone on mobile, with the option to tap on it / link. Any help / suggestion are really appreciated. AV
tuanphan Posted February 14, 2022 Posted February 14, 2022 Can you share link to page on your site? We can check & tweak the code easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment