Jump to content

Request for help with hover effects on video block

Recommended Posts

Hey guys, 

 

I'm looking for some help with a custom CSS code for my Squarespace website. Here is the link: https://prism-pumpkin-mj3a.squarespace.com/work.

 

I'm looking to add some hover effects to the 10 video blocks that you see on the website. On each block, I would like a slight zoom-in, accompanied by a text overlay of the title of the video when hovered over. I’ve managed to get the hover effects for the video thumbnail alone by working through custom CSS. However, I’ve had no luck in getting a text overlay working. Could someone help with this? Also to note, both the text overlay and video thumbnail hover effects would need to stop once the video has been clicked.

 

Here is the code I have so far:

 

.sqs-block-content {

    position: relative;

    overflow: hidden;

}

.sqs-block-content .intrinsic {

    width: 100%;

    height: auto;

    transition: all 0.3s ease;

}

.sqs-block-content:hover .intrinsic {

    transform: scale(1.1);

    transition: 0.3s;

    filter: opacity(80%);

}

 

Would appreciate some help with this at the earliest!

 

Thanks a bunch

 

-Kaz

Link to comment
  • Replies 4
  • Views 2.3k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • 7 months later...
  • 1 month later...

Love the result here, @Kaz92 
What was the code you ended up using? And was this used on a new Video Page? I'm hoping to do something similar, at least with the zoom. Love the blur effect though. Looks smart!

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.