Jump to content

How to make a CSS-only header image clickable?

Recommended Posts

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

Link to comment
  • Replies 5
  • Views 1.6k
  • Created
  • Last Reply
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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;
}

image.thumb.png.ca6e364331d9db19ea833d9dc1e58701.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

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