[bluetroop2Participant]

Hello,

I just want to create a simple mouse-over effect on the images on this page…
http://watson.bluetroop.com/index.php/products/
The images will link to select product pages.

I’ve already uploaded the “off” and “on” images into my media library and now what to create the roll-overs. In Cornerstone, I’ve placed an image and assigned it a class name (int-sliding). Then I placed this code within the page’s CSS…

.int-sliding:hover {
content: url(http://watson.bluetroop.com/wp-content/uploads/2016/09/sampleProductPic3.jpg);
z-index: 999;
width: 100%;
}

But it does not work. Can you tell me what is wrong?

[bluetroop2Participant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please try this JS code :

jQuery("a.x-img.int-sliding img").hover(function( ){
jQuery(this).attr("src","http://watson.bluetroop.com/wp-content/uploads/2016/09/sampleProductPic3.jpg");
 },function(){
    jQuery(this).attr("src","http://watson.bluetroop.com/wp-content/uploads/2016/09/sampleProductPic.jpg");

});

Hope it helps.

[bluetroop2Participant]

Yes, it works, thanks.
Will X Theme add a roll-over image element in the future?

[RahulModerator]

Hey There,

Thanks for writing back!

We are always open for suggestions. We have forwarded this request to our developers, they will soon come up with some updates regarding this. Stay tuned!

Thank You.

[bluetroop2Participant]

Thanks, please see my page…

http://watson.bluetroop.com/index.php/products/

It works great, but on the roll-over, it adds another slight white fade to the image. How can I eliminate that? I want the roll-over image to be the clear, vibrant color image I uploaded.

[Nabeel AModerator]

Hi again,

To fix this, add this code in your Customizer:

a.x-img:not(.x-img-thumbnail):hover {
    opacity: 1 !important;
}

Let us know how this goes!

[bluetroop2Participant]

Works correctly now, thanks.

[FriechModerator]

We’re delighted to assist you with this.

Cheers!

[Author]

Posts