Docs

[Kamal V]

Hi X,

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

[Kamal V]

This reply has been marked as private.

[Paul R]

Hi 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.

[Kamal V]

hi x,

is anyone checking this? thank you.

regards,
kamal

[Lely]

Hi 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.

[Kamal V]

Hi,

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

[Paul R]

Hi 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.

[Author]

Posts