{"id":8934,"date":"2020-06-30T15:00:26","date_gmt":"2020-06-30T13:00:26","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=8934"},"modified":"2022-02-23T10:20:54","modified_gmt":"2022-02-23T09:20:54","slug":"slider-revolution-hover","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/slider-revolution-hover\/","title":{"rendered":"How to Make Slider Revolution Layers Change on Hover"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]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<\/a>. <\/em>[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]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<\/a>, we usually make layers change on hover when they come with some sort of implied or required action. A good example are buttons<\/a>, 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<\/a> you can make other layers, like text, change on hover as well. In fact, today we\u2019ll be showing you how to add Slider Revolution hover effects to text.[\/vc_column_text][vc_empty_space height=”68px”][vc_column_text]<\/p>\n

How to Add Hover Effects in Slider Revolution<\/h2>\n

[\/vc_column_text][vc_column_text]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<\/strong>, click on Hover<\/strong>. Click on the Enabled<\/em> switch to turn it on.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Hover <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Underneath you\u2019ll 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<\/a>.[\/vc_column_text][vc_empty_space height=”72px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Hover Settings<\/h3>\n

[\/vc_column_text][vc_column_text]The first thing you can set here is the Cursor<\/strong>. The dropdown menu contains a couple of different options for it. Auto<\/em> and Default<\/em> are the same ones, and choosing them will not reflect on your cursor in any way.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Hover <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]The Crosshair<\/em> and Pointer<\/em> concern the shape of your mouse cursor on screen. These are both pretty conventional.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Crosshair <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]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<\/em> cursor.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Pointer Event<\/strong> is set to Auto<\/em> by default. The option None<\/em> is used when there is no linked content behind the layer.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Pointer <\/div>\n<\/div>[vc_empty_space height=”82px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Hover Transform<\/h3>\n

[\/vc_column_text][vc_column_text]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\u2019t happen suddenly<\/strong>. It is always much better when the transition occurs with a bit of delay. The delay is by default set to 300ms<\/strong>, so you can leave it like that if it works for you, or assign it a different value.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Hover <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]You can also set the easing<\/strong> for the transition, choosing from several preset options.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Easing <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]If you don\u2019t 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<\/strong>.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Edit <\/div>\n<\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=”90px”][vc_widget_sidebar sidebar_id=”slider-revolution-banner”][vc_empty_space height=”84px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Hover Font, Border and Filter<\/h3>\n

[\/vc_column_text][vc_column_text]Font Hover Style<\/strong> allows us to change the color of the text on hover or add an underline, overline or line-through.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Font <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]You can also add a background color<\/strong> to your hover.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Add <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]There is also the possibility of adding a border around the text<\/strong> and specifying the color, choosing the style, and entering the border thickness value expressed in pixels.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Adding <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]The border angles can have a radius<\/strong>, also specified in pixels.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Border <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]One more thing that can be added to your layers hover is Filter<\/strong>. This basically means blurring up the layer to a certain, specified extent. This too is expressed in pixels: the higher the value, the \u201cthicker\u201d the blur.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Hover <\/div>\n<\/div>[vc_empty_space height=”79px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

In Conclusion<\/h2>\n

[\/vc_column_text][vc_column_text]That\u2019s 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.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

Slider Revolution hover effects are rather simple to create and set up, and can do wonders for your sliders, making them more dynamic and interactive. <\/p>\n","protected":false},"author":6,"featured_media":8947,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,53,4,13],"class_list":["post-8934","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-slider-revolution","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/8934","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=8934"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/8934\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/8947"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=8934"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=8934"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=8934"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}