Adding a simple hover mode to main video pages in Squarespace (7.1)

• 00
• 01
• 02
• 99

When 7.1 Video Pages first came out, I got a bunch of questions regarding how to style both the main page and the inner “post” pages.

So, today, I want to share with you one of the ideas I came up with to add a little bit of interesting details to an otherwise plain layout!

We’ll be building a clean look for the video items, as well as a little sliding label with the help of a pseudo-element.

Want to know how to implement this on your client’s site?

Then jump into the tutorial!

Tutorial

Overview & timestamps

1. 00:00 - Intro

2. 00:46 - Preview of the final customization
   Before jumping into the actual tutorial, we’ll take a quick look at the final result we’ll be aiming for: an awesome looking layout with a cool sliding “label” as the hover mode!

3. 01:11 - Styling the main video page items
   To start out, we’ll add some color and a sleek border to the entire video page items, to make sure that they pop from the blank background.

4. 05:27 - Quick tip to fix overflow issues when padding is added
   Next, we’ll look into how to fix a veeeery common issue that usually comes up when we’re trying to add padding to an element that never had any. Luckily, the kind of overflow that shows up here can be easily fixed with a single line of code!

5. 05:59 - Creating the "Watch Video" label for the main video page items
   Moving on to the good stuff, we’ll take a few minutes to set up and style our videos’ label. We’ll use an ::after pseudo-element to create it and be able to position it over the video thumbnails. I’ll be using this lovely little icon for mine!

6. 14:21 - Creating the hover mode for the video items label
   Last but not least, we’ll set up the actual hover mode that will make the label slide in and out of the side of the thumbnail when curious visitors stand over any of the video previews.

Hope you enjoyed this one!

Until next time,

B.

---

Full code

/*ADDING A SIMPLE HOVER MODE TO MAIN VIDEO PAGES IN SQUARESPACE 7.1*/
//Video page item styles
#video-gallery-main-content .grid-item {
  background-color: #fafafa;
  border: 1px solid black;
}
#video-gallery-main-content .grid-meta-wrapper {
  box-sizing: border-box;
  padding: 30px;
}

//Label styles
#video-gallery-main-content .grid-image::after {
  background-image: url(ICON.png);
  background-position: 15px 40%;
  background-repeat: no-repeat;
  background-size: 40px;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  content: 'Watch video';
  background-color: white;
  font-size: 16px;
  font-weight: bold;
  line-height: 1em;
  padding: 20px 20px 20px 55px;
  position: absolute;
  bottom: 20px;
  right: 0;
  transition: transform .3s;
  transform: translateX(70%);
}

//Hover mode
#video-gallery-main-content .grid-item:hover .grid-image::after {
  transform: none;
}