Slide Background Image with CSS

  • follow us in feedly
Published March 28, 2013 by Brad Knutson
Slide Background Image with CSS

Sliding images and divs around has become a go-to move for designers and developers alike. The “slide image on hover” is widely used and very simple to impliment. But what about sliding background images?

We can easily accomplish this with CSS. We’ll essentially just explicitly set the background image position for the div and on the :hover pseudo class. If this is all we set, the transition will be abrupt and frankly kind of ugly, so we’ll the CSS3 property transition to give us a smoother transition.

Below I’ll show a few examples (just hover over the div) but you can play with the positioning and get pretty much any slide effect that you want.

Slide From Side

WordPress
Drupal
HTML5
CSS3

CSS

.image-slide-demo {
	background-position: 150% 50%;
	background-image: url('path/to/image.png');
	background-repeat: no-repeat;
	-webkit-transition: all ease 0.2s;
	-moz-transition: all ease 0.2s;
	-o-transition: all ease 0.2s;
	-ms-transition: all ease 0.2s;
	transition: all ease 0.2s;
}
.image-slide-demo:hover {
	background-position: 75% 50%;
}

Slide Up

WordPress
Drupal
HTML5
CSS3

CSS

.image-slide-demo {
	background-position: 50% -550%;
	background-image: url('path/to/image.png');
	background-repeat: no-repeat;
	-webkit-transition: all ease 0.2s;
	-moz-transition: all ease 0.2s;
	-o-transition: all ease 0.2s;
	-ms-transition: all ease 0.2s;
	transition: all ease 0.2s;
}
.image-slide-demo:hover {
	background-position: 50% 50%;
}

Slide Diagonally

WordPress
Drupal
HTML5
CSS3

CSS

.image-slide-demo {
	background-position: -550% -550%;
	background-image: url('path/to/image.png');
	background-repeat: no-repeat;
	-webkit-transition: all ease 0.2s;
	-moz-transition: all ease 0.2s;
	-o-transition: all ease 0.2s;
	-ms-transition: all ease 0.2s;
	transition: all ease 0.2s;
}
.image-slide-demo:hover {
	background-position: 50% 50%;
}
The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

2 thoughts on “Slide Background Image with CSS

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">