[tlauenParticipant]

Hi! Is it possible to add on hover animation to image layers in slider revolution?

On my website (http://vaul.lauen.no/) I have five boxes in the slider each linking to a sub-page, but I’d like them to do a small animation when hovered. Nothing fancy, just that they “pop up” a little or something so that the visitors understand that they are actual links.

[FriechModerator]

Hi there,

Thank you for writing in! I dont know what effect you really like, but how about we invert the color on hover. You can add this under Custom > CSS in the Customizer.

.tp-caption img:hover {
	filter: invert(1);
	-webkit-filter: invert(1);
	-moz-filter: invert(1);
	-o-filter: invert(1);
	-ms-filter: invert(1);
}

Hope it helps, Cheers!

[tlauenParticipant]

Thank you, I found a tilt animation I’m quite happy with. The thing now though is that all the elements gets the hover animation. As you can see on my website (vaul.lauen.no) there’s six elements, a logo and five boxes. I need help with either of my two alternatives:

1) How to only have the animation effect on the five boxes that are links and NOT the logo
OR
2) How to add the same smooth link animation to the logo (and make that a link) as the arrow

[John EzraMember]

Hi there,

Thanks for updating the thread! Here’s how to do option 1. You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.tp-caption.tp-fade.start img {
    transition:none;
    transform:none;
}

Hope this helps – thanks!

[tlauenParticipant]

Hi!

Thanks, that helped a bit. I found out that instead of the rotate animation, I rather added a simple “margin-top: 10px;” animation that looks more sophisticated and tidy. Problem is that your solution doesn’t work anymore.

Sorry for the inconvencience, but I hope you can still help me!

[tlauenParticipant]

Nevermind, kind of fixed it with adding a margin-top:10px; to the solution you gave me above. Now it’s always at margin-top:10px;

[ChristianModerator]

Glad you’ve sorted it out. 🙂

[Author]

Posts