How do I add a hover layer on top of my embedded video that has text and takes away the play symbol

Hello, I would like to create a hover effect over my embedded video that highlights a text of what said video is.  In doing this, I would like the play button to go away.  Is this possible?  Below is the site I'm currently building as well as an example of a site I would like to mirror.  Please advise.

Site I'm building:

https://grey-salmon-msk9.squarespace.com/config/pages

Password:  TRIXIE.

Site I would like my site to look like. 

https://www.rachelmorrison.com/directing-commercials

You will see when you hover over the commercials on this site, the title of the commercial appears.  Also, there is no play symbol.  Is this possible to do on the site I'm building?

Attached is a pic of the site I'm building and the site I would like to mirror.

Thank you so much for your help!

Natalee

Good Morning, 

Apologies for the confusion. Similar to the website I'm hoping to mirror, where you hover over the image and the word IKEA comes up and image darkens (image below - website - https://www.rachelmorrison.com/directing-commercials) have an image, without  play button on it (as my site currently does - image below - website site: https://www.gretchenwarthen.com/unscripted .  Password: TRIXIE) and when the user hovers over, the background goes darker and the text appears showing what the image is.  So if my site would do that, I would not see the play button on my icon, it would instead read TOUGH AS NAILS when the viewer hovers. The hand icon on the cursor would then indicate to the viewer to click to dive deeper into the site.  Once in, obviously they would need that play icon on the embedded player to play the video.     I hope that is more clear.  

Thank you for  you help!

Natalee

1 hour ago, 1000Watts said:

Good Morning, 

Apologies for the confusion. Similar to the website I'm hoping to mirror, where you hover over the image and the word IKEA comes up and image darkens (image below - website - https://www.rachelmorrison.com/directing-commercials) have an image, without  play button on it (as my site currently does - image below - website site: https://www.gretchenwarthen.com/unscripted .  Password: TRIXIE) and when the user hovers over, the background goes darker and the text appears showing what the image is.  So if my site would do that, I would not see the play button on my icon, it would instead read TOUGH AS NAILS when the viewer hovers. The hand icon on the cursor would then indicate to the viewer to click to dive deeper into the site.  Once in, obviously they would need that play icon on the embedded player to play the video.     I hope that is more clear.  

Thank you for  you help!

Natalee

You can try the following Custom Css

/*hide play button, add the hover effect background, general css to set text on hover*/
#collection-662c1e2ee31c86635a14da05 .sqs-video-wrapper .sqs-video-overlay .sqs-video-opaque {
  background: rgba(0,0,0,0.7);
}

#collection-662c1e2ee31c86635a14da05 .sqs-video-overlay:hover .sqs-video-opaque {
  opacity:1;
  transition: opacity 0.3s ease-out;
}

#collection-662c1e2ee31c86635a14da05 .sqs-video-overlay .sqs-video-icon {
  opacity: 0;
  z-index: 3;
}

#collection-662c1e2ee31c86635a14da05 .sqs-video-overlay:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  color: #fff;
  font-weight: bold;
  opacity: 0;
  font-size: 22px;
}

#collection-662c1e2ee31c86635a14da05 .sqs-video-overlay img {
  z-index: 0;
}

#collection-662c1e2ee31c86635a14da05 .sqs-video-overlay:hover:before {
  opacity: 1;
  transition: opacity 0.3s ease-out;
}


/*Text Content on hover for each block*/
#block-yui_3_17_2_1_1714268710793_46764 .sqs-video-overlay:before {
  content: 'Touch as nails'
}

My testing

Let me know how it works on your site

Hi there, this doesn't seem to be working on my site?  Maybe I'm putting in the code wrong?  Please advise and thank you so much for the help!

Hi following up on this to see if you wouldn't mind look at my site to see why this code is not working.  

Thank you!

10 hours ago, 1000Watts said:

Hi following up on this to see if you wouldn't mind look at my site to see why this code is not working.  

Thank you!

Can you take screenshots where you are adding my code?

Here you go!

Hi checking to see if you had a chance to look at where I added our code.  Thanks in advance!