mollym Posted February 9 Share Posted February 9 Hi! I'm making a gallery block for a videographer that opens videos in a lightbox. I'm trying to add a hover effect where the thumbnail has a color overlay and shows the title on hover. I'm having two issues: 1. The color overlay on hover is only working on static images, but not on the video thumbnails (that open the video in a lightbox). There's a test static image at the bottom of the gallery that it is working on. I've tried to figure out if the video thumnails have a different selctor – I've tried: .video-fill .sqs-gallery-block-grid .video-lightbox-wrapper .sqs-video-wrapper .video-fill .sqs-video-opaque .sqs-video-overlay .sqs-video-opaque Does anyone know how to fix this? 2. I can't figure out why the text/title is getting cut off/cropped. Website: https://roninproductions.squarespace.com/work PW: ronin This is the code I'm using. /* overlay and title on hover */ .slide a:after { position: absolute; content: ""; background: rgba(5,5,57,0.6); z-index: 999; top: 0; left: 0; width: 100%; height: 100%; opacity: 10%; transition: all 0.5s; pointer-events: none; } .slide a { position: relative; } .slide a { position: relative; opacity: 1 !important; } .slide:hover a:after { opacity: 1; } .image-slide-title { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; text-align: center; font-size: 2em!important; font-family: "obviously"; color: white; opacity: 0; z-index: 1000; transition: all 0.5s; pointer-events: none; } .slide:hover .image-slide-title { opacity: 1; } Link to comment
Solution nick_sh Posted February 9 Solution Share Posted February 9 Opaque correct selector seems to be: .sqs-video-wrapper .sqs-video-overlay .sqs-video-opaque Title: .image-slide-title { ...your styles... overflow: visible !important; margin-top: 0 !important; } tuanphan 1 Try new Squrespace ID & class finder Chrome Extension ✔ Supports Fluid Engine ✔ Generate Media Queries code ✔ Toggle IDs with Option / Alt ____ Hire me for SquareSpace development Link to comment
mollym Posted February 9 Author Share Posted February 9 Amazing, that worked! Thank you so much!! Link to comment
abbeyk Posted April 25 Share Posted April 25 Hi, I am trying to achieve the same effect on video blocks I have on my page. I know next to nothing about coding so I can't really follow what's already been posted earlier. I tried copying and pasting the code above into the custom CSS box on the page but it doesn't seem to do anything. Can someone help me with the exact code I need to use to make this work? Thanks so much Link to comment
tuanphan Posted April 27 Share Posted April 27 On 4/26/2024 at 5:16 AM, abbeyk said: Hi, I am trying to achieve the same effect on video blocks I have on my page. I know next to nothing about coding so I can't really follow what's already been posted earlier. I tried copying and pasting the code above into the custom CSS box on the page but it doesn't seem to do anything. Can someone help me with the exact code I need to use to make this work? Thanks so much You can share link to page where you use video block, we can check 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!) Link to comment
eleanorpetry Posted August 7 Share Posted August 7 Hi, I am trying to apply this same method to my video blocks and don't understand code. Please help! https://www.eleanorpetry.com/videos Link to comment
tuanphan Posted August 10 Share Posted August 10 On 8/7/2024 at 11:04 PM, eleanorpetry said: Hi, I am trying to apply this same method to my video blocks and don't understand code. Please help! https://www.eleanorpetry.com/videos You mean Hover video: Show title, Overlay Click Video: show lightbox slideshow video ? 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!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment