Slider Revolution WP
09.27.2016
Show/Hide Layer On Slide Hover
This article is now outdated!
Click here to view how this can be done with “Actions” in version 5.0+
If you want to have a specific layer that only shows up when hovering your mouse over the slider, here’s how this can be accomplished:
Add a layer to the slide
Select the layer on the preview stage, and then inside the “Layer Animation” section, apply the settings highlighted in the following screenshot:
Next, open the “Layer Links & Advanced Params” section, and add a special class to the “Classes” section:
Next, from the “Layers Timing & Sorting” section, set the “Start” and “End” to the complete duration of the slide’s timeline:
Next, click the green “Update Slide” button, and then scroll to the bottom-left of the page, and click the “To Slider Settings” button:
Finally, scroll to the “CSS/JavaScript” section, and enter the following into the “Custom CSS” section:
CSS Code to Copy and Paste:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.my-hover-class { visibility: hidden !important; opacity: 0 !important; -webkit-transition: all 0.2s ease-out !important; -moz-transition: all 0.2s ease-out !important; -o-transition: all 0.2s ease-out !important; transition: all 0.2s ease-out !important; } .rev_slider:hover .my-hover-class { visibility: visible !important; opacity: 1 !important; } |
