Docs

[majid]

Hello ,
I used below code for hover but it is not working on my theme

a.x-img.bottom-img-1 {
   background: url(http://MySite/wp-content/uploads/2016/04/mice-pointers-on.png) no-repeat center top;
   background-size: contain;
   transition: 0.25s all ease-in-out;
}

a.x-img.bottom-img-1:hover img {
   opacity: 0;
   transition: 0.25s all ease-in-out;
}

a.x-img[class*="bottom-img-1"] img {
   transition: 0.25s all ease-in-out;
}

there is two image uploaded one for before hover(mice-pointers-off.png) and second one for after hover(mice-pointers-on.png) but hover not working .
i add this one in class image “x-img.bottom-img-1″
Also when using this class for image ” bottom-img-1 ” it is only shows mice-pointers-on.png

can you please tell my what shall i do

[majid]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing in! I am not sure what you are trying to achieve with this code. Would you clarify where you have used this element on your page and what you are trying to accomplish?

Cheers!

[majid]

hi , did you check website i wrote link ,mouse hover on image not working

[Jade]

Hi Majid,

I tested this code below and should work fine:

a.x-img.bottom-img-1:hover {
    background: url(http://sibezard.com//wp-content/uploads/2016/04/mice-pointers-on.png) no-repeat center top;
    background-size: contain;
   transition: 0.25s all ease-in-out;    
}

a.x-img.bottom-img-1:hover img {
   opacity: 0;
   transition: 0.25s all ease-in-out;
}

a.x-img[class*="bottom-img-1"] img {
   transition: 0.25s all ease-in-out;
}

If this doesn’t work, it could be that the CSS codes in your customizer are not properly coded as there might be missing closing brackets. You can test this by moving the code above to the top most part of the customizer. If it works then kindly check your current CSS codes for proper coding.

Thank you.

[Author]

Posts