Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
tylerelise

Flatiron: adding hover state to logo

Question

6 answers to this question

Recommended Posts

  • 0

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;
}

 


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
  • 0
Posted (edited)

@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;
}

 

Screen Shot 2020-03-03 at 4.41.11 PM.png

Edited by tylerelise
typo

Share this post


Link to post
  • 0
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. 


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
  • 0
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;
}

 


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...