Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #286803

    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

    #286905

    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

    #287139

    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!

    #287146

    Hi!

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

    .logo:hover img {
    opacity: 0;
    }

    Cheers!
    Yigit

    #287151

    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

    #287153

    Hi!

    You are welcome Chrys, glad we could help :)

    Best regards,
    Yigit

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