Sliding Door Reveal with CSS

  • follow us in feedly
Published May 1, 2013 by Brad Knutson
CSS Sliding Door Effect

For some reason today while looking out into my backyard through my sliding glass door, I got inspired to recreate the animation with CSS. Don’t ask, it’s been one of those days…

At any rate, the door doesn’t need to be transparent (although we can reproduce this effect if we want), it can be a solid color, a gradient, an image, it could even be content if you’d like.

The point is, the doors are preventing you from getting to something (in reality), or preventing you from seeing something (in the web). By hovering over them, wouldn’t it be cool to reveal to the user what is behind them?

So how would we go about recreating this animation? The doors slide open, parting in the middle, to reveal the content behind them. Do we need jQuery? Can we do this with just CSS?

Well, if you’re reading this post, and you read the title, you already know that we can do this with CSS. This wasn’t always the case though, as these complex animations used to require javascript to produce the desired effects.

Sliding Door CSS

View Demo

I’ve come up with three examples, all with the same concept, but different methods of execution.

Sliding Doors – Colored Background

The first example is the basic effect we’re after. The doors are colored differently so you can easily tell them apart. Hover over them and they’ll part in the middle, revealing the “secret” content hidden behind.

Let’s dive in and look at how this effect is created.


<div class="container">
<div class="sliding-door">
<div class="door-left">Hover over me</div>
<div class="door-right">I have secrets!</div>
		<!-- Content goes here -->

Fairly simple structure, now how about some CSS?


.container {
	position: relative;
	overflow: hidden;
.door-left, .door-right {
	position: absolute;
	height: 100%;
	width: 50%;
	top: 0%;
	transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-webkit-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3;
.door-left {
	left: 0%;
	background-color: rgb(91,96,106);
.door-right {
	left: 50%;
	background-color: rgb(229,211,211);
.container:hover .door-left{
	left: -50%;
.container:hover .door-right{
	left: 100%;

You can style the container and the door divs however you would like, the above CSS is the basis for the effect and animation.

There really isn’t anything too special going on here. We’re absolutely positioning two divs (each 50% the width of the container), and using the CSS3 transition attribute to make the animation smooth and easy on the eyes.

View Demo

Background Image Sliding Doors

This one looks really cool. It takes a little bit of work to position the container. I won’t get into the CSS specifics here, and the HTML structure is the same. Please inspect the page if you’d like to see how I created the effect.

View Demo

Diagonal Sliding Doors

I decided to kick it up a notch and use a little more CSS. For this effect, I used the transform: skew() property to angle the doors. The animation turned out really well.

View Demo

There is really no limit to what you could with this type of effect. Why stop at two doors? What about nested doors? Use your imagination!

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



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

One thought on “Sliding Door Reveal 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="">