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


    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.

    I want the black one become orange when hover.




    Hey Chrys!

    Try with a code like this:

    .logo:hover a:after {
        content: "";
        background-image: url(;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
        display: block;
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;



    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!



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

    .logo:hover img {
    opacity: 0;



    Hi Yigit,


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

    Thanks to you both!

    Kid regards




    You are welcome Chrys, glad we could help :)

    Best regards,

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘logo hover effect with my own image’ is closed to new replies.