Flatiron: adding hover state to logo

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

I'm trying to add a hover state to my logo where it just swaps for another image on the hover. Any tips on how to achieve?

Thank you!

Add to Home > Design > Custom CSS

header#topBar .siteTitle:hover img {
    visibility: hidden;
}
header#topBar .siteTitle:hover a {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

@tuanphan It seems to mostly be working, but on hover the image is getting cut off (it's the same size as the original image that it's replacing) - any idea of how to fix that? This is the code I'm using (same as above), I'll also attach a screenshot - thank you!

header#topBar .siteTitle:hover img {
    visibility: hidden;
}
header#topBar .siteTitle:hover a {
    background-image: url(https://static1.squarespace.com/static/5b6a1ca95417fc8b395b5d7d/t/5e5eceac961f0532348cb896/1583271596165/tyler-elise-wink-01.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

19 minutes ago, tylerelise said:

@tuanphan It seems to mostly be working, but on hover the image is getting cut off (it's the same size as the original image that it's replacing) - any idea of how to fix that? This is the code I'm using (same as above), I'll also attach a screenshot - thank you!

 

 

Which plan do you use? Personal or Business. 

@tuanphan personal - is this something you'd only be able to do with a business plan?

On 3/4/2020 at 10:19 PM, tylerelise said:

@tuanphan personal - is this something you'd only be able to do with a business plan?

Edit above code to

header#topBar .siteTitle:hover img {
    visibility: hidden;
}
header#topBar .siteTitle:hover a {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 100%;
    display: block;
}

@tuanphan amazing, thank you so much!