Jump to content

JohnMcWaters

Member
  • Posts

    5
  • Joined

  • Last visited

Posts posted by JohnMcWaters

  1. On 11/17/2020 at 6:57 AM, tuanphan said:

    Add to Home > Design > Custom CSS

    
    /* show logo on hover */
    .logo-image:hover img {
        visibility: hidden;
    }
    .logo-image:hover a {
        background-image: url(https://beaverhero.com/wp-content/uploads/2020/11/work-5382501_640-min.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
    }

    Replace with your new logo url

    Hi tuanphan,

    I successfully got my logo to switch when you hover over it, however I've noticed that when doing so the new logo is slightly shorter, like it's compressing it horizontally. The result is you get a little jitter when it switches.

    Pixel by pixel, the two images are the same size with the same letter positioning.

    Any idea what could be causing this?

     

  2. 4 hours ago, tuanphan said:

    Add to Home > Design > Custom CSS

    
    /* show logo on hover */
    .logo-image:hover img {
        visibility: hidden;
    }
    .logo-image:hover a {
        background-image: url(https://beaverhero.com/wp-content/uploads/2020/11/work-5382501_640-min.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
    }

    Replace with your new logo url

    Thank you so much! What did you have to change to get it to work on my site?

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