Rev Slider, Same size Image Rollover

avitacreative · February 2016

Hello, I am needing to have the revslider do a same size image rollover and it isn't working. In other words, I want a one image to rollover an image of the same size but when I set the parameters for that to happen (yes, I've read the documentation, everything is set correctly) it does not work.

What will happen is if I rollover, it wont do anything, but if I click and hold, the rollover will appear.

If I offset the rollover image a little, it will work if I hold my mouse over the offset part, but will disappear the instant I move my mouse (not off the image)

I tried contacting revslider about this, but they said I'd have to buy the plugin to receive support. I am hoping you can help, as this is definitely an advertised feature of the revslider. (mouse enter/leave animations)

I am working on the site today but you can see what I mean by looking at the top left, long rectangular image. It is set exactly as shown to be in the documentation. The rollover image is offset a couple pixels to the right, so if you hold your mouse over the left edge for a second or two, you will see the rollover eventually appear. The site is http://www.taylorrowe.com/adella

avitacreative · February 2016

here is a more detailed test page with examples.

http://taylorrowe.com/adella/index.php/test/

Albert · February 2016

Hi,

http://pasteboard.co/1Orirbcv.png - this image explains how this slider should be set.

avitacreative · February 2016

Thank you, will try.

avitacreative · February 2016

It didn't work in the way I need it too. Parameters set like this

http://taylorrowe.com/adella/wp-content/uploads/2016/02/rollover.jpg

reacts like this first roll over text, second roll over left):

http://taylorrowe.com/adella/index.php/test/

What is wrong is that the target image is always shown and then hides on mouse enter, reappears on mouse leave. I need it to be reversed. It also wont work unless there is space around the target image to hover, but i need images the same size.

I really appreciate your help.

Albert · February 2016

Send us dashboard access thru private message.

avitacreative · February 2016

I did, thank you.

avitacreative · February 2016

For those of you curious on how to do this since I looked everywhere for the answer and it wasn't explained.

You have your two images "bottom image" is the image you want to appear on rollover, the top image is the image you want to be seen when not hovering. Make sure the bottom image is underneath the top image in the layers section.

You will want to configure the the top image, through the action tab to be like this:

1. Dropdown> mouse enter Dropdown> toggle layer class Target>top image Class>hide
2. Dropdown> mouse leave Dropdown> toggle layer class Target>top image Class>hide

Then, up at the top you will want to open the purple tab, next to the green save tab and enter this:

.tp-caption a {

color:#ff7302;

text-shadow:none;

-webkit-transition:all 0.2s ease-out;

-mos-transition:all 0.2s ease-out;

-o-transition:all 0.2s ease-out;

-ms-transition:all 0.2s ease-out;

}

.tp-caption a:hover {

color:#ffa902;

}

.hide {opacity:0 !important;}

Save and voila, it works.

Thanks MG for helping out.

Albert · February 2016

You are welcome!

Rev Slider, Same size Image Rollover

Comments