Jump to content

Text reveal on hover over code block showing video

Recommended Posts

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

 

Link to comment

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>

 

Link to comment
  • 3 months later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.