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.

.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>


Link to comment
  • 3 months later...

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.