Overlay and Caption on Hover for Videos

How to target this to specific video blocks only if I have the block IDs? When I try, the hover effect doesn't work anymore.

On 2/17/2024 at 2:58 AM, JamIsJam88 said:

How to target this to specific video blocks only if I have the block IDs? When I try, the hover effect doesn't work anymore.

Which exact code did you try?

48 minutes ago, tuanphan said:

Which exact code did you try?

I actually just realized I could use a section ID instead, and that worked! When I just used a specific block ID, the hover effect didn't work.

section[data-section-id="657dd35569daf04c17c39128"] {
  .video-caption-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 60%;
    text-align: center;
    color: #EBE9E5;
    font-size: 10px;
    z-index: 50000;
    pointer-events: none;
    opacity: 0.75;
    transition: all 1s;
  }
  .video-block .intrinsic:after {
    content: "";
    background-color: rgba(68, 58, 49, .75);
    display: block;
    top: 10%;
    left: 15%;
    width: 70%;
    height: 80%;
  	border-radius: 25px;
    z-index: 20000;
    position: absolute;
    opacity: 0;
    transition: all 1s;
  }
  .video-block:hover .intrinsic:after {
    opacity: 1;
    transition: all 1s;
  }
  .video-block:hover .video-caption-wrapper {
    opacity: 1;
    transition: all 1s;
  }
}

On 2/18/2024 at 11:48 AM, JamIsJam88 said:

I actually just realized I could use a section ID instead, and that worked! When I just used a specific block ID, the hover effect didn't work.

section[data-section-id="657dd35569daf04c17c39128"] {
  .video-caption-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 60%;
    text-align: center;
    color: #EBE9E5;
    font-size: 10px;
    z-index: 50000;
    pointer-events: none;
    opacity: 0.75;
    transition: all 1s;
  }
  .video-block .intrinsic:after {
    content: "";
    background-color: rgba(68, 58, 49, .75);
    display: block;
    top: 10%;
    left: 15%;
    width: 70%;
    height: 80%;
  	border-radius: 25px;
    z-index: 20000;
    position: absolute;
    opacity: 0;
    transition: all 1s;
  }
  .video-block:hover .intrinsic:after {
    opacity: 1;
    transition: all 1s;
  }
  .video-block:hover .video-caption-wrapper {
    opacity: 1;
    transition: all 1s;
  }
}

 

Use Block ID doesn't work because this class name = ID

If you use a block id wrap around all code, the code will be invalid so it doesn't work

On 2/20/2024 at 3:31 AM, tuanphan said:

Use Block ID doesn't work because this class name = ID

If you use a block id wrap around all code, the code will be invalid so it doesn't work

Oh okay. Good to know. Thanks! The section ID works great, so I'm okay with that.