Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 3, 2014 at 6:54 pm #286803
    chryseis

    Hi,

    I desperately try to add an hover effect on this logo. I’ve seen on another thread how to give a hover effect with that code: 

    .logo a:hover {
opacity: .90;
}

    But What I want to achieve is make my logo change color so I thought about adding my own image like that: 

    .logo a :hover{
background: url('http://localhost:8888/calli/wp-content/uploads/2014/07/logoecrituresimpleBIS-.png');
}

    The other image appears but a little more above when I mouse over but the first one won’t disappear.

    What do I miss? This is one really great thing I’d like to put in place on my website, I’d love if you can help.
    Right now I’m on local because I’m making tests.

    Please find some links with screenshots so you understand better.

    https://www.dropbox.com/s/tk404b1933rvjnh/logo1.jpg
    https://www.dropbox.com/s/u1j0z1nq4n4kck6/logo2.jpg

    I want the black one become orange when hover.

    Thanks!

    Chrys

    July 3, 2014 at 10:42 pm #286905
    Josue

    Hey Chrys!

    Try with a code like this:

    .logo:hover a:after {
    content: "";
    background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

    Regards,
    Josue

    July 4, 2014 at 12:20 pm #287139
    chryseis

    Hi Josue,

    It’s the same as before. The red logo appears behind the black one but this time under it instead of above with my code.
    The black one won’t disappear to let the red one its place…Any idea?

    Thanks a lot!

    July 4, 2014 at 12:32 pm #287146
    Yigit

    Hi!

    Please use Josue’s code and add following one to Quick CSS as well

    .logo:hover img {
opacity: 0;
}

    Cheers!
    Yigit

    July 4, 2014 at 12:45 pm #287151
    chryseis

    Hi Yigit,

    Perfect!

    I’ve just added that for the original logo the dark one, so that both logos are at the same level and the change of color appears smoothly (with initial transition there was a small “blink effect”)

    .logo img {
    height: 100%;
    transition:none;
    }

    Thanks to you both!

    Kid regards

    Chrys

    July 4, 2014 at 12:46 pm #287153
    Yigit

    Hi!

    You are welcome Chrys, glad we could help :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘logo hover effect with my own image’ is closed to new replies.