Slider Revolution WP
09.27.2016
Custom Image Hovers
This article is now outdated!
Use the “Hover” options located here instead with version 5.0+
Before continuing, to learn about how you can hyperlink slides and slide content, click here.
1. If you’d like to add an “opacity” hover effect to the slide’s main background image:
1.1 Add a hyperlink to the slide:
1.2 Visit the slider’s main settings page, then scroll to the bottom of the page and click the “CSS/JavaScript” tab:
1.3 Then paste the following into the “CSS” section:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.rev_slider .custom-hover { -webkit-transition: opacity 0.5s ease-out; -moz-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; } .rev_slider:hover .custom-hover { opacity: 0.5; } |
1.4 Finally, paste the following code below into the “JavaScript” section.
IMPORTANT NOTE: The “revapi1” part will need to be changed to represent your current slider. The screenshot below shows where you can get your slider’s “revapi” name. Change all “revapi1” parts in the code below, to whatever your slider’s “revapi” name happens to be.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
revapi1.on('revolution.slide.onloaded', function() { revapi1.find('li').each(function() { var slide = jQuery(this); if(slide.find('.slidelink').length) { slide.find('.slotholder').addClass('custom-hover'); } }); }); |
2. To apply an “opacity” hover effect to an image layer:
2.1 Go to edit one of your slides, and click the “Add Layer” button. Then add the following into the “Text/HTML” section:
|
1 2 3 |
<a class="my-custom-hover" href="https://www.google.com"><img src="some_image_url.jpg" alt="" /></a> |
2.2 Next, click the “Edit Global Style” button (screenshot below)
2.3 Finally, add the following code to the very top (screenshot after code)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.my-custom-hover img { -webkit-transition: opacity 0.5s ease-out; -moz-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; -ms-transition: opacity 0.5s ease-out; } .my-custom-hover:hover img { opacity: 0.5; } |
