Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 13, 2015 at 1:45 am #410805
    sunshineh

    Hi,
    I have a small logo and beside a textlabel in my Header.
    Now I want, that the logo and the Label is changing the Color onMouseover.

    With the text exerything work fine, but when I said my logo should disapper and in the Background my colored logo should apper, my text moved away.
    How could I solve this?

    
.logo:hover img {  
    opacity: 0;  
}  

.logo:hover {  
    background-image: url(https://...//Logo_dgruen_56x40.png);  
    background-size: 40px 30px;  
    background-repeat: no-repeat;  
    top: 14px;  
}
    March 13, 2015 at 4:51 pm #411099
    Yigit

    Hi sunshineh!

    Please change your second code to following one 

    .logo:hover {
  background-image: url(EDITED);
  background-size: 40px 30px;
  background-repeat: no-repeat;
  background-position: 0% 50%;
}

    Regards,
    Yigit

    March 14, 2015 at 10:35 am #411463
    sunshineh

    Thanks Yigit,
    please can you have a short look at the side again.
    What can I improve, so that the color changing? I think there is already something wrong.
    (please can you remove my URL in your post)

    March 16, 2015 at 2:57 am #411799
    Ismael

    Hi!

    I think it’s better if you hide the actual logo image then set initial logo as background like the hover state:

    .logo a img { opacity: 0; }

.logo {
  background-image: url(INITIAL LOGO HERE);
  background-size: 40px 30px;
  background-repeat: no-repeat;
  background-position: 0% 50%;
}

    Regards,
    Ismael

    March 22, 2015 at 2:01 am #415828
    sunshineh

    Thanks, it works great!

    March 23, 2015 at 7:36 am #416232
    Rikard

    Hi!

    Great, glad we could help :)

    Best regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.