0

I'm trying to make a background slide in from the left when hovering over it, but when not hovering anymore, I don't want it to go back to the left, I want it to go to the right. I've followed the instructions here and I wrote this:

#wsite-menus .wsite-menu li a {
background-position: 0 0 !important;
background-size: 200% 100% !important;
background-image: linear-gradient(to right, #1e1e1e 50%, #00b050 50%) !important;
-webkit-transition: background-position 0.4s !important;
-moz-transition: background-position 0.4s !important;
transition: background-position 0.4s !important;
}

#wsite-menus .wsite-menu li a:hover {
background-position: -100% 0 !important;
}

What can I add to make the background slide out in the other direction? Sorry if this is a dumb question everyone knows the answer to, but I'm far from a CSS expert. Thanks in advance!

Community
  • 1
  • 1
lyra
  • 121
  • 4

1 Answers1

0

I would do some JS that adds a class on the mouseleave event of the link. That class will contain a new transition that will slide the image out to the right, this will override the original transition.

Shan Robertson
  • 2,742
  • 3
  • 25
  • 43