You guys are awesome 🙂

I am trying to change the image on hover but i am unable to figure that out.

I am using a set of images for secondary navigation(6 images in total). When I hover on an image I want the image to change to another image.

Something similar to Demo1 in the below link:
http://css3.bradshawenterprises.com/cfimg/

I will send you the details of my site in a private reply.

Thankyou,
Kamal

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

is anyone checking this? thank you.

regards,
kamal

Rest assured that we’re checking every post.
To change image on hover, the image should be used as background.

HTML should like this

<a class="x-img butt_img x-img-link x-img-none none x-img-link-one" href="http://marine.createbiggbang.com/wp-content/uploads/2015/04/OHI-Marine-Pleasure.jpg" data-options="thumbnail: 'http://marine.createbiggbang.com/wp-content/uploads/2015/04/OHI-Marine-Pleasure.jpg'" >&nbsp;</a>

Notice the x-img-link-one CSS class that I added, now we will define it’s style below.

*Please add the following code in your Customizer via Appearance > Customize > Custom > CSS:

a.x-img-link-one{
  background: url('http://marine.createbiggbang.com/wp-content/uploads/2015/04/OHI-Marine-Pleasure.jpg') top center no-repeat;
    width: 100%;
    height: auto;
    display: inline-block;
}
a.x-img-link-one:hover{
  background: url('url-of-image-on-hover-here') top center no-repeat;
}

Repeat the above html and CSS for every button.
The image should be at least 225X112 to remove the white space.

Hope this helps.

Thanks for the reply. i am not sure how to add the HTML part in the theme.

My problem right now is:
I want to add two images in one DIV as it is mentioned in DEMO1 in the below link:
http://css3.bradshawenterprises.com/cfimg/

This is to have that hover effect which is in the above DEMO1. Using visual composer i could add only one image.

My website details are same as in my previous private reply.

Please help.

Thanks,
Kamal

Since you are using Visual Composer, you can try this method instead.

1. Add a class to the image you added in visual composer

http://screencast.com/t/Mu9eteYos

2. assuming you added a class my-image-class in the class field of the image, you can then add this CSS code below in the Custom CSS box in the customizer

.my-image-class:hover {
   content: url(url-of-image-on-hover-here);
   z-index: 999;
   width: 100%;
}

3. You can do the same on your other images by assigning another different class and targeting the specific class for custom CSS

Hope that helps.