[blatixParticipant]

Hi guys,

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

[Kosher KMember]

Hi There,

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

[blatixParticipant]

Sound as a pound!

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

[Kosher KMember]

Glad to hear it works,

Cheers

[dlorentyParticipant]

This worked great for me. I followed the instructions perfectly.

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.

[dlorentyParticipant]

Also, I can’t seem to make it work for a second image even though I made a second class for it. This particular CSS code is at the very bottom. Could you please help me?

[dlorentyParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

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.

[dlorentyParticipant]

Would you know why I cannot get this to work for the second picture?

[RadModerator]

Hi there,

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

Thanks!

[dlorentyParticipant]

Hi. I changed that. I was using travel-image-class and daily-image-class, but could not make it work. I ended up having to use travel-image-class and travel-image-class2. Does that sound right to you?

[ZeshanMember]

Hi there,

Yes, if you wish to achieve it for multiple images, you can use multiple instances of the provided CSS code with different classes. In your case, travel-image-class, travel-image-class2, travel-image-class3 and so on. So your code would look something like:

.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;
}

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

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

Thanks!

[acbrent25Participant]

Hi,

I tried this method and it somewhat works for me. In Chrome it works but kind of makes a glitchy movement on hover the first time.

but it doesn’t work for me at all on firefox. I have been pulling my hair out for hours trying to figure it out.

Can you help?

http://macleanagency.virtuentmedia.com/our-team/

[ChristopherModerator]

Hi there,

Instead of adding another image on hover, add a single class to all images like hover-effect and try following CSS:

img.hover-effect {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'>&l…3 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: gray;
    -webkit-filter: grayscale(100%);
}
img.hover-effect:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'>&l…1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}

Hope it helps.

[acbrent25Participant]

Thanks Christopher,

I’m editing this in Cornerstone so I’m not really understanding how to implement it.

Could you be more specific?

Thank you

[Author]

Posts