CSS Sliding Background Animation

This is what I use on my Home Page, and achieve a sliding box effect on hover solely using CSS with no jquery.

It uses a background image, a transition, and adjusts the background-position on hover.

An example of the CSS:

#container {

background-size: 200% 100%;
background-image: linear-gradient(to right, white 50%, red 50%);
-webkit-transition: background-position 1s;
-moz-transition: background-position 1s;
transition: background-position 1s;

}
#container:hover {

background-position: -100% 0%;

}


First example - mouse over here

Note that the background-size and background-position are both in {x y} format, so you can change this from left > right sliding to right > left or even vertical. You can also use an actual image for the background-image, and speed up or slow down the transitions by changing the time in the transition property.

#boxTwo{

background-size: 200% 100%;
background-image: linear-gradient(to right, white 50%, red 50%);
-webkit-transition: background-position 1s;
-moz-transition: background-position 1s;
transition: background-position 1s;

}
#boxTwo:hover {

background-position: 100% 0%;

}


Right to Left

#boxThree{

background-size: 100% 200%;
background-image: url("http://www.veganpirate.info/images/DSC00953.JPG");
-webkit-transition: background-position 5s;
-moz-transition: background-position 5s;
transition: background-position 5s;

}
#boxThree:hover {

background-position: 0% 100%;

}


Then image will slowly slide down

Leave a Reply

Your email address will not be published. Required fields are marked *