Animating the logo on hover in Brine

00
01
02
03
99

Custom code is not always about fixing things or breaking through Squarespace’s Style Editor boundaries.

Sometimes is just about having a bit of fun with your design.

So, for today’s CSS trick, we’re going to be looking at how we can create an awesome animated logo on hover, when using any of the Brine family templates.

If you’re working with 7.1, I encourage you to go through the tutorial to understand the reasoning behind what we’re doing so that you can adapt it to work for you! And if you want help with this or have questions along the way, I’d love to personally support you inside the Club!

Ready? Let’s go!

Note: in case you’re interested, the coffee mug icon used for the logo in this tutorial was made by Smashicons and I downloaded it from Flaticon.

Logic of the approach

The goal is to have our regular logo in place at all times and then animate it only on hover.

But, the trick is that we’re going to create the illusion that the image is animating, when in reality we’ll be using 2 separate images to create the effect: one will be a regular png, and the other one an animated gif.

Then, on hover, we’ll switch up their corresponding visibility to make it seem like the logo is “playing”.

This means that we need to upload a second image to our logo container in order to have them both in the exact same place and be able to create the effect.

And, since we can’t do that through Squarespace’s settings, we’ll have to do it via CSS.

So, the first thing we have to do is check out our current logo image and its surroundings:

Ok, so we have that our current logo is an img element with a class of .Header-branding-logo

Ideally we need to give that image a sibling so that we can overlap them and make them match in size, in order to create our effect.

But to create that sibling, because we can’t tweak the HTML, we’ll have to add it in as a pseudo-element.

This means that we need to add the pseudo-element to the direct parent container of our image in order to have it sit as a second “adopted” child.

With that in mind, let’s look at its direct parent container:

Alright, so this is an a element with a couple of classes, including one called .Header-branding that may just do the trick.

Let’s “attach” our pseudo-element to it.

Creating the "adopted" sibling

In this case it doesn’t really matter if we use a ::before or an ::after since the original image and the pseudo-element won’t be displaying at the same time.

I’ll go with an ::after and start with the basics to create an empty container that has the same width and height as its direct parent container (.Header-branding):

.Header-branding::after {
  content: '';
  height: 100%;
  width: 100%;
}

Now, to upload our animated gif, we’ll use the background-image property along with a few other tweaks to make sure the gif is in place within the pseudo-element container we just created:

.Header-branding::after {
  background-image: url('https://static1.squarespace.com/static/5e396e0cd589db5a1b0afc56/t/5ed7a96f238c6011ad184513/1591191920035/Coffee-logo.gif');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  height: 100%;
  width: 100%;
}

Ok!

We’re not seeing anything yet because we have to either give our ::after a display value or position it.

Since we’re looking to overlap it with the existing logo, we’ll give it a position of absolute and set its top and left offsets to 0.

.Header-branding::after {
  background-image: url('https://static1.squarespace.com/static/5e396e0cd589db5a1b0afc56/t/5ed7a96f238c6011ad184513/1591191920035/Coffee-logo.gif');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

It seems like our pseudo-element isn’t using .Header-branding as its reference point since even when we set it to top: 0 and left: 0, the gif isn’t aligned to the top/left corner of the original logo container.

Let’s change that by giving .Header-branding a position of relative:

.Header-branding {
  position: relative;
}

Alright, much better!

However, our gif seems to be slightly bigger than the existing logo image.

We know that our ::after container has the exact same width and height of the .Header-branding container we’re attaching it to.

So, perhaps the img element itself has a different size and isn’t expanding to fit its parent container like the pseudo-element is.

Let’s take a look and see what we find:

Yep, that seems to be it.

As suspected, the img element has a max-width set (via Site Styles), so we’ll need to use that same size on our gif in order to make them identical.

So, instead of background-size: contain let’s use background-size: 195px and see how that goes:

.Header-branding::after {
  background-image: url('https://static1.squarespace.com/static/5e396e0cd589db5a1b0afc56/t/5ed7a96f238c6011ad184513/1591191920035/Coffee-logo.gif');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 195px;
  content: '';
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

Perfect!

Creating the animation

Last but not least, it’s time to set up our hover mode animation.

First, we’ll hide the pseudo-element at all times by giving it an opacity of 0:

.Header-branding::after {
  background-image: url('https://static1.squarespace.com/static/5e396e0cd589db5a1b0afc56/t/5ed7a96f238c6011ad184513/1591191920035/Coffee-logo.gif');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 195px;
  content: '';
  height: 100%;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

And then, when hovering over the .Header-branding container (the one holding BOTH images), we’ll make the original img element hide by giving it an opacity of 0, and then target the ::after to make it show up with an opacity of 1:

.Header-branding:hover img {
  opacity: 0;
}

.Header-branding:hover::after {
  opacity: 1;
}

Let’s test it out!

I increased the size of the screen to make the logo more prominent:

How about that?!

We just created a super simple yet awesome-looking animated logo on hover.

I hope you liked this one!

Until next time,

B.

Full code

/*ANIMATING YOUR LOGO ON HOVER IN BRINE*/
.Header-branding {
  position: relative;
}

//Creating the second image
.Header-branding::after {
  background-image: url('https://static1.squarespace.com/static/5e396e0cd589db5a1b0afc56/t/5ed7a96f238c6011ad184513/1591191920035/Coffee-logo.gif');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 195px;
  content: '';
  height: 100%;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

//Hover mode
.Header-branding:hover img {
  opacity: 0;
}
.Header-branding:hover::after {
  opacity: 1;
}