First of all…. Wow! Congratulations for such an amazing theme, I will surely buy more licences in the near future (as soon as I get my business started!)

With the visual composer, I’m trying to add a custom CSS rule in the picture element. What I want to achieve is this:

I want to change the picture on hover to another picture… the CSS “:hover” rule does not work in the picture element…. I have several pictures that I like to apply this effect so if this could be done from the picture element editor would make life much easier…. otherwise, should I do it on the CSS editor of the page?

Many thanks in a advance!

Blat

Thanks for writing in

Can you try this method,

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

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 field of the page,

.my-image-class:hover {
content: url(your-site.com/your-hover-image.jpg);
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

Let me know how it works,
Cheers

Thank you for such quick reply, the code did the trick!

I tried using the page CSS rather than the one build in the element, but I guess I add the css declaration wrong background-image: url(your-site.com/your-hover-image.jpg);

You’ve save me a good few hours of york trying to figure out what was wrong!

Thanks a mil and let me know if I can leave a positive review anywhere for you guys.

Regards

Blat

Cheers

The only thing I would like to fix is how the hover image is bigger than the original. This is even the case when I use the same image for the original and the hover. How can I make them both have a white border and stay the same?

Here is the url: lorentywebdesign.com/LifePsych

It’s on the Topics section half-way through the page. I will be using that shortcode to throw it in my revolution slider. Don’t mind the images in the slider. I’ll post credentials in case you want to get in and take a look.

Please update both X and CS and update your code to :

.travel-image-class:hover {
  content: url(http://lorentywebdesign.com/LifePsych/wp-content/uploads/2015/07/Pinguino_hover.jpg);
  z-index: 999;
  max-width: 100%;
  display: inline-block;
}

Hope it helps.

Second image works, it looks like not because they are just the same image. The hover just have some texts.

Thanks!