David Jones

Slide up background transition

I have been trying to get a slide colour effect on hover and I decided to use CSS transitions to do achieve this. Here is what I came up with:

CSS:

-webkit-transition: background-position 0.5s;
-moz-transition: background-position 0.5s;
-o-transition: background-position 0.5s;
transition: background-position 0.5s;
background-image: linear-gradient(to bottom, white 50%, $orange 50%);
background-size: 100% 200%;

What we basically do here is set a back ground image of a gradient that is half white and half orange. Then on hover we set the background position to give the effect that it is sliding up.

&:hover {
background-position: 0 100%;
}

I use SASS just incase you did not recognise the syntax.