Docs

[rvgulik]

Hi guys,

I’m using revolution slider on my homepage and I’ve used some image layers for social media on a slide. I’ve set up the hover option and I’d like to invert the colors when I hover on those particular icons. I’ve tried some code in the CSS custom, but that resulted in inverting the color of every imagelayer and every other image on the homepage. How do I set up the inverted colors on only four images in my slider and not everything else?

Thanks!

[rvgulik]

This reply has been marked as private.

[Jade]

Hi there,

Try to add a class name to each of the image layer. You can do this by selecting the image layer then clicking on the Attribute tab then add the class name under the classes field.

You can then add the class name to reference each of the social media image layer on your CSS code.

Hope this helps.

[rvgulik]

Hi Jade, thanks for your reply. I’m only not sure what to do right now. Can you please provide me with the CSS code I need to use to invert the color of my images on the slide? I added user credentials for you to take a look. Thanks in advance!

Cheers

[Rue Nel]

Hello There,

I found out that you have inserted a JS code in the custom css section. Please remove this code and if this is necessary and applicable for your site, the properly place in the customizer is Appearance > Customize > Custom > JS

(function($){ 
	$('.x-social-global').append('<a href="#social-link" class="spotify" title="spotify" target="_blank"><i class="x-icon x-icon-spotify"></i></a>');
})(jQuery);

Regrading the invert image colors, perhaps this links would help:

Invert Colors Using CSS

http://stackoverflow.com/questions/13325798/invert-colors-of-an-image-in-css-or-javascript
http://stackoverflow.com/questions/17741629/invert-color-using-css

As this is all custom development, regretfully we won’t be able to assist further. Custom development is outside the scope of our support. We’re happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation.

Hope this helps.

[Author]

Posts