How to Make Slider Revolution Layers Change on Hover
This article is part of our ongoing series of Slider Revolution tutorials. You can find all the articles from this series in our Comprehensive Slider Revolution Guide.
Hover effects are one of the staples of good UX. When an element changes on hover, it serves as a clear indication that an action is required, performed or completed. In sliders, we usually make layers change on hover when they come with some sort of implied or required action. A good example are buttons, where the change on hover indicates that the action (clicking on the button that activates a link) is performed. In addition to buttons, with Slider Revolution you can make other layers, like text, change on hover as well. In fact, today we’ll be showing you how to add Slider Revolution hover effects to text.
How to Add Hover Effects in Slider Revolution
The first thing to do is to turn the layer hover on. Select the layer you want to add the effect to, and, under Layer Options, click on Hover. Click on the Enabled switch to turn it on.
Underneath you’ll find all the options you need for setting your layer behavior on hover. If you leave all as it is, the layer will not show any changes.
Hover Settings
The first thing you can set here is the Cursor. The dropdown menu contains a couple of different options for it. Auto and Default are the same ones, and choosing them will not reflect on your cursor in any way.
The Crosshair and Pointer concern the shape of your mouse cursor on screen. These are both pretty conventional.
You can find a couple more cursor styles here, some of them a bit unusual, but each indicating the sort of action your layer has when triggered. For example, if your layer is linked to a help or support resource, you can go with the Help cursor.
Pointer Event is set to Auto by default. The option None is used when there is no linked content behind the layer.
Hover Transform
Moving on to other settings for the layer behavior on hover, we have Hover Transform, which you can set to your liking. There are some things to keep in mind here, though. For instance, when the layer changes on hover, the transition shouldn’t happen suddenly. It is always much better when the transition occurs with a bit of delay. The delay is by default set to 300ms, so you can leave it like that if it works for you, or assign it a different value.
You can also set the easing for the transition, choosing from several preset options.
If you don’t want your text layer to have the same size and style as the initial look, you can change everything, from perspective, through rotation, to size.
Hover Font, Border and Filter
Font Hover Style allows us to change the color of the text on hover or add an underline, overline or line-through.
You can also add a background color to your hover.
There is also the possibility of adding a border around the text and specifying the color, choosing the style, and entering the border thickness value expressed in pixels.
The border angles can have a radius, also specified in pixels.
One more thing that can be added to your layers hover is Filter. This basically means blurring up the layer to a certain, specified extent. This too is expressed in pixels: the higher the value, the “thicker” the blur.
In Conclusion
That’s pretty much all there is to creating Slider Revolution hover effects. Like basically anything else about this plugin, this process too is very simple and straightforward. The plugin lets you add this dynamic effect to your slides and customize the way it will play out, assuring the resulting effect clicks perfectly with the rest of your page.
