Sign up for our newsletter and be the first to get all the latest Qode news and updates.

How to Make Slider Revolution Layers Change on Hover

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.

Adding 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.

Hover Effects in Slider Revolution

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.

Hover Settings

The Crosshair and Pointer concern the shape of your mouse cursor on screen. These are both pretty conventional.

Crosshair and Pointer

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.

Pointer Event

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.

Hover Transform

You can also set the easing for the transition, choosing from several preset options.

Easing for the transition

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.

Edit text layer
Qode WordPress Themes: Top Picks
Bridge WordPress Theme Banner

Creative Multi-Purpose WordPress Theme

Stockholm WordPress Theme

A Genuinely Multi-Concept Theme

Startit WordPress Theme

Fresh Startup Business Theme

Backpack WordPress Theme
Backpack Traveler

Modern Travel Blog

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.

Font Hover Style

You can also add a background color to your hover.

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.

Adding a border around the text

The border angles can have a radius, also specified in pixels.

Border angles radius

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.

Hover Filter

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.

Post your comment