Mousehover effect LayerSlider - Support | Kriesi.at

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
March 10, 2015 at 2:59 am #408578

tomek_z
Participant

Hi,
I am trying to have mouse over efect on layer slider. Josue suggested in https://kriesi.at/support/topic/mousehover-effect-layerslider/
to use ” swap the image on hover” but I cannot figure out how to do it.
I have 2 pics.
http://www.galerievenis.com.pl/wp-content/uploads/2015/03/Africa-shape-przezr.png
http://www.galerievenis.com.pl/wp-content/uploads/2015/03/Zyrafa-Afr-przezr.png
and want to put them on a blue background slider.

Thank you
Tomasz

March 10, 2015 at 11:54 am #408745

Rikard
Keymaster

Hey tomek_z!

I’m not sure I understand entirely what you want to do, show another image when hovering? Also, please provide us with a link to the site in questions so that we can have a closer look.

Cheers!
Rikard

March 10, 2015 at 12:51 pm #408775

tomek_z
Participant

Hi,
I do not have this on the site. This is an idea. I am thinking about the effect like here
http://www.toptravel.pl/startowa.html

I would like to have continents and pictures apearing on mouse over.

Kind regards

Tomasz

March 11, 2015 at 5:24 am #409667
Ismael
Moderator
Hi!

You can try the solution provided on the previous thread: http://codepen.io/anon/pen/XJxXXw

Create a layer on the layer slider panel, switch it to HTML then add something like this:
```
<div class="custom_layer">
    <img src="http://www.iq.poquoson.org/3socst/continents_oceans/continentmap2.gif" class="first" />
    <img src="http://www.countrycallingcodes.com/graphics/continentsmap.jpg" class="last" />
  </div>
```
Add this css code to the Quick CSS field:
```
.custom_layer img{
  position: absolute;
}
.custom_layer{
  position: relative;
}
.custom_layer:hover .first{
  z-index: 2;
}
```
Best regards,
Ismael
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.