Another Background-image when hovering on widgets

  • Hello to all,

    I’m having problems with setting another background-image on the 3 widgets of the first page when hovering on it (my theme is Responsive Free from cyberchimps). I’ve set image1 when no mouse is hovering on it, and i would like to have image2 when hovering with mouse on it.

    Currently i have set image1 in “Design -> Widgets -> Homepage Widget 1″ with following html-code:

    <a href="https://..." rel="attachment wp-att-1234"><img src="https://..." alt="image1" width="100" height="150" class="aligncenter size-full wp-image-1234" /></a>

    and it’s working fine.

    And now i wanted to set image2 in my style.css (of my child-theme of course). I used the id #text-11:hover. And so looks my code in this id:

    #text-11:hover {
background-image: url(“https://…”);
background-repeat: no-repeat;
background-position: center;
}

    I can see image2 in my widget1 but it’s behind image1. I tried to add z-index in the id #text-11:hover but image2 is still behind image1.

    What do i have to do to make image2 instead of image1 showing when hovering with mouse on the widget1.

Viewing 5 replies - 1 through 5 (of 5 total)
  • melinda a11n

    (@melindahelt)

    Automattic Happiness Engineer

    I did something similar using css classes to display a black and white image and then show a full color image on hover.

    In the text widget, I used the following code and assigned a new class name to each graphic.

    <a href="https://...." class="LinkName">LinkName</a>

    Then for the CSS I used the following. 

    a.classname {
background-image: url(https://.../LinkName-blue.jpg);
background-position: 0 0;
}

a.auditing:hover {
background-image: url(https://.../LinkName-color.jpg);
}

    Hope this helps. If it doesn’t, can you share a link to your site and I can take a look?

    Thread Starter TaddyWP

    (@taddywp)

    Hi melindahelt,

    first of all, thanks for your answer.

    When i use in my text widget “LinkName” as the class-name, do i have to name a.classname like a.LinkName?

    And what is a.auditing? Do i have to name it exactly like this or do i also have to replace it with the class-name used in my text-widget?

    Thanks in Advance

    melinda a11n

    (@melindahelt)

    Automattic Happiness Engineer

    I”m sorry for the confusion! I was taking code from one of my projects and simplifying it, and I made it more complicated ??

    The auditing word was left from my own code. I should have changed that, so ignore it and ignore my title case.

    Let me try this again!

    Use this code in your text widget:
    <a href="https://...." class="classname">Link Text</a>

    Use this code in your stylesheet:

    a.classname {
background-image: url(https://.../image1.jpg);
background-position: 0 0;
}

a.classname:hover {
background-image: url(https://.../image2.jpg);
}

    In the above example, my images had text on top of them (the Link Text) but if you are just showing images, you can probably leave that out.

    Here’s the site where I used this technique: https://millancpa.com. Maybe it will help you to see it on the live site too.

    Thread Starter TaddyWP

    (@taddywp)

    It does not work :(. By the way. I’ve set the background-image in the text-widget not in the style.css because i don’t use a Link Text, but i think this does not matter?

    melinda a11n

    (@melindahelt)

    Automattic Happiness Engineer

    If you set the background image inside the text-widget, then the CSS won’t take over in order to do the hover state.

    If you can share a dev site link, I can take a peak and see what I think.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Another Background-image when hovering on widgets’ is closed to new replies.