Text reveal on hover over code block showing video

Site URL: https://celery-prism-5xaj.squarespace.com

I am trying to build a 7.1 version of my 7.0 site mainly because I am finding using multiple gifs too heavy and am trying to use coded blocks to run linked videos instead.

I am building a portfolio style page with multiple projects, either represented by a still image or by linked video. What I would like is a hover effect that reveals the name of the project in the block when the cursor rolls over. Have done this for the stills using this Video

But I would like to achieve the same effect for the code blocks I am using to run video.

I am a bit of a newbie at this so could do with some help. Thank you

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

I managed to work it out.

CSS
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  background:  rgba(0%, 0%, 0%, 0.5);
  transition: .5s ease;
}
.sqs-block:hover .overlay {
  opacity: 1;}

Then in code block:

<div class="overlay">
    <h2>Text Goes Here</h2>
  </div>

Would you be able to show how you did this? I am wanting to do a text overlay for my videos as well. 

17 hours ago, ahasslocher said:

Would you be able to show how you did this? I am wanting to do a text overlay for my videos as well. 

Have you tried above approach yet?