How to make a CSS-only header image clickable?

Site URL: https://www.cassiebarden.com

I just added some CSS to my site to give my logo a hover effect (hovering triggers an animated gif) but now it's not clickable. I see why, since using CSS I added a second image on top of the logo placed through Squarespace's editor. But I can't access the HTML so I'm not sure how to make it a link...

This is the guide I used: https://beatrizcaraballo.com/blog/animated-logo

30 minutes ago, KaijuCorgi said:

Site URL: https://www.cassiebarden.com

I just added some CSS to my site to give my logo a hover effect (hovering triggers an animated gif) but now it's not clickable. I see why, since using CSS I added a second image on top of the logo placed through Squarespace's editor. But I can't access the HTML so I'm not sure how to make it a link...

This is the guide I used: https://beatrizcaraballo.com/blog/animated-logo

Could you enable the animated logo so we can suggest a solution, technically the gif file can be part of the link by assigned it into background of link's psuedo element

3 hours ago, bangank36 said:

Could you enable the animated logo so we can suggest a solution, technically the gif file can be part of the link by assigned it into background of link's psuedo element

Done! 

4 minutes ago, KaijuCorgi said:

Done! 

Where you add the gif background, add new line z-index:-1

.header-title-logo::after {
    background-image: url(https://static1.squarespace.com/static/5f2ca8b…/t/60b6ce8…/1622593158512/logo-animation.gif);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: '';
    height: 100%;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -1;
}

You're brilliant @bangank36! Thank you! 

@KaijuCorgi Do you need to fix these?

Site URL – https://www.cassiebarden.com/

1. (Tablet-About) Increase width?

2. (Tablet-Overlay Menu) Add a space between lines?