Overlay and Caption on Hover for Videos

Add to Design > Custom CSS

/* Reels video overlay */
.video-caption-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
    color: white;
    font-size: 16px;
    z-index: 50000;
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s;
}
.video-block .intrinsic:after {
    content: "";
    background-color: rgba(0,0,0,0.5);
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20000;
    position: absolute;
    opacity: 0;
    transition: all 0.3s;
}
.video-block:hover .intrinsic:after {
    opacity: 1;
    transition: all 0.3s;
}
.video-block:hover .video-caption-wrapper {
    opacity: 1;
    transition: all 0.3s;
}

Hi. Your site is private. Can you setup password & share url gain? We can check easier

1 hour ago, tuanphan said:

Hi. Your site is private. Can you setup password & share url gain? We can check easier

Yep! Here's the site and pw - thanks! 

https://fish-nectarine-wbzr.squarespace.com/

c?yNhS8>vmJd`YMA

On 6/5/2021 at 9:29 AM, tuanphan said:

Add to Design > Custom CSS

/* Reels video overlay */
.video-caption-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
    color: white;
    font-size: 16px;
    z-index: 50000;
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s;
}
.video-block .intrinsic:after {
    content: "";
    background-color: rgba(0,0,0,0.5);
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20000;
    position: absolute;
    opacity: 0;
    transition: all 0.3s;
}
.video-block:hover .intrinsic:after {
    opacity: 1;
    transition: all 0.3s;
}
.video-block:hover .video-caption-wrapper {
    opacity: 1;
    transition: all 0.3s;
}

 

This worked perfectly - thank you so much!!

Hi,

Is it possible to apply this to multiple videos each with a different captions on hover? If so, how do you identify each caption with each video?

Many thanks!

12 hours ago, MimiRobson said:

Hi,

Is it possible to apply this to multiple videos each with a different captions on hover? If so, how do you identify each caption with each video?

Many thanks!

Above code target all videos. You need to add caption first, then add code.

Thank you so much!

However this seems to prevent the ability to start the video playing?

any thoughts on how to remedy this?

On 7/2/2021 at 3:45 PM, MimiRobson said:

Thank you so much!

However this seems to prevent the ability to start the video playing?

any thoughts on how to remedy this?

I'm finding this too - the code for the overlay is perfect, but the videos won't play once the overlay is on. Has anyone got a solution? I am very new to all this! 

On 7/30/2021 at 7:15 PM, claireh2006 said:

I'm finding this too - the code for the overlay is perfect, but the videos won't play once the overlay is on. Has anyone got a solution? I am very new to all this! 

Can you share link to your site? We will check it again

On 7/2/2021 at 9:45 PM, MimiRobson said:

Thank you so much!

However this seems to prevent the ability to start the video playing?

any thoughts on how to remedy this?

Do you still need help?

On 8/1/2021 at 3:49 AM, tuanphan said:

Can you share link to your site? We will check it again

Do you still need help?

the link is https://coyote-dinosaur-h58h.squarespace.com/ and the template is matsuya - thank you!!