smithy_sw

Here is the solution I found. There might be a better way, but this turns the description on a video embed block into an full overlay caption on hover. // video embed block caption overlay // .video-caption-wrapper:hover { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; background: rgba(0,0,0,.5); padding: 45px 80px 50px 50px; max-height: 100% !important; box-sizing: border-box !important; overflow-y: auto !important; color: white; } .video-caption-wrapper { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; background: rgba(0,0,0,0); padding: 45px 80px 50px 50px; max-height: 100% !important; box-sizing: border-box !important; overflow-y: auto !important; color: rgba(0,0,0,0); }

I have an embed block displaying a vimeo video. I would like the description below it to display as an overlay on hover – similar to the image block. It's the green bird feeder description text on this page https://mandolin-viola-xzwy.squarespace.com/work-3 which I would like to appear similar to the yellow back of phone image at the top of the page. Thanks for any help!

Thanks for the advice. I'll take a look and see if I can work it out 🙂

I'm using code blocks to add svg illustrations to my site which is working great. But does anyone know if there's a way to swap out an alternative svg code block on mobile? Any help will be much appreciated.