Hover Video – Show Text, Overlay and still be clickable

#1. First, you need to add Video Caption

#2. Next, use this code to Custom CSS box

div.video-caption-wrapper {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
}
div.video-block:hover div.video-caption-wrapper {
    opacity: 1;
}

#3. Result

#4. If you want to apply this for videos on one page only, first you need to find Page ID. Use this tool.

In my example, we have:

• #collection-62efb3c3c8fd1b760e7e4471

Next, use this CSS code

#collection-62efb3c3c8fd1b760e7e4471 {
div.video-caption-wrapper {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
}
div.video-block:hover div.video-caption-wrapper {
    opacity: 1;
}}

#5. If you want to apply for specific video: First you need to find Video Block, use #4 tool.

In my example, we have:

• #block-yui_3_17_2_1_1723475358355_58212

Next, use this code to Custom CSS box

#block-yui_3_17_2_1_1723475358355_58212 {
div.video-caption-wrapper {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
}
&:hover div.video-caption-wrapper {
    opacity: 1;
}}