How to Change Slider Revolution Layers in Hover

This article is part of our ongoing Slider Revolution tutorials. You can find all the articles in this series in our Comprehensive Slider Revolution Guide.

Hover effects are one of the key features of good UX. When an item changes on hover, it serves as a clear indication that an action is required, performed, or completed. In sliders, we usually change layers on hover when they come up with some kind of implied or required action. A good example are buttons where a mouseover change indicates that the action (clicking the button that activates a link) is performed. In addition to buttons, with Slider Revolution you can change other layers, such as text, on hover. In fact, today we’re going to show 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 on the layer highlight. Select the layer you want to add the effect to and click Layer Optionsclick hover over. Click activated toggle to open.

Below it you will find all the options you need to adjust your layer behavior on hover. If you leave everything as it is, the layer will not show any change.

hover settings

The first thing you can set here is, cursor. The drop-down menu contains several different options for this. Auto and Default are the same, and selecting them will not be reflected in your cursor in any way.

This plus sign and Pointer Pay attention to the shape of your mouse cursor on the screen. Both of these are pretty traditional.

Here you can find a few more cursor styles, some of which are somewhat unusual, but each one that shows the type of action your layer has when triggered. For example, if your tier is connected to a help or support resource, Help cursor.

Pointer Event set Auto by default. Choice None Used when there is no linked content behind the layer.

Mouse Conversion

Moving on to other settings for layer behavior on hover, there’s Hover Transform that you can tweak to your liking. Still, here are some things to keep in mind. For example, when the layer changes on hover, The transition should not be abrupt.. It’s always much better when the transition happens with some delay. delay by default 300msso you can leave it that way or assign a different value if it works for you.

also relaxation For the transition, choose from a variety of preset options.

If you don’t want your text layer to have the same size and style as the first view, you can change everything from perspective to size via rotation.

Accent Font, Border and Filter

Font Accent Style It allows us to change the color of the text on hover or add underline, strikethrough or strikethrough.

You can also add a background color for your hover.

there is also the possibility add border around text and specifying the color, choosing the style, and entering the border thickness value expressed in pixels.

Boundary angles can have a radiusalso specified in pixels.

One more thing to add on layers, filter. This basically means blurring the layer to a certain, certain extent. This is also expressed in pixels: the higher the value, the “thicker” the blur.

As a result

Slider Revolution is pretty much all that for creating hover effects. Like basically everything about this plugin, this process is very simple and straightforward. The plugin allows you to add this dynamic effect to your slides and customize the way it plays, ensuring that the resulting effect matches the rest of your page perfectly.