Design Lunatic

CSS3 Sliding Boxes

I think CSS3 is amazing. With that thought in mind, I’ll explain how to create an interesting image hover effect that’s usually made in Javascript, in CSS3.

HTML

Before we can start animating things in CSS3, we have to have a solid HTML foundation. Now, take a look at this code:

<section class="imagebox" id="imagebox1">

	<img src="images/img1.jpg" alt="Image 1.">
	
	<div class="slidingbox" id="slidingbox1">
		<h3>Image 1</h3>
		<p>Lorem ipsum dolor sit amet, consectur amet sit dolor ipsum lorem.</p>
	</div>
	
</section>

There’s an HTML5 “section” element that holds everything necessary for the image hover effect: an “img” and a div with a class of “slidingbox”. The div is what slides onto the image.

Here’s the code for the other two sections:

<section class="imagebox" id="imagebox2">
	
	<img src="images/img2.jpg" alt="Image 2.">
	
	<div class="slidingbox" id="slidingbox2">
		<h3>Image 2</h3>
		<p>Lorem ipsum dolor sit amet, consectur amet sit dolor ipsum lorem.</p>
	</div>
	
</section>


<section class="imagebox" id="imagebox3">
	
	<img src="images/img3.jpg" alt="Image 3.">
	
	<div class="slidingbox" id="slidingbox3">
		<h3>Image 3</h3>
		<p>Lorem ipsum dolor sit amet, consectur amet sit dolor ipsum lorem.</p>
	</div>
	
</section>

However, since we want the images to be centered on the page, wrap all three sections in a “container” div.

<div id="container">

<section class="imagebox" id="imagebox1">

	<img src="images/img1.jpg" alt="Image 1.">
	
	<div class="slidingbox" id="slidingbox1">
		<h3>Image 1</h3>
		<p>Lorem ipsum dolor sit amet, consectur amet sit dolor ipsum lorem.</p>
	</div>
	
</section>


<section class="imagebox" id="imagebox2">
	
	<img src="images/img2.jpg" alt="Image 2.">
	
	<div class="slidingbox" id="slidingbox2">
		<h3>Image 2</h3>
		<p>Lorem ipsum dolor sit amet, consectur amet sit dolor ipsum lorem.</p>
	</div>
	
</section>


<section class="imagebox" id="imagebox3">
	
	<img src="images/img3.jpg" alt="Image 3.">
	
	<div class="slidingbox" id="slidingbox3">
		<h3>Image 3</h3>
		<p>Lorem ipsum dolor sit amet, consectur amet sit dolor ipsum lorem.</p>
	</div>
	
</section>

</div>

A simple HTML page. Now that we’ve got that, we can move on to the CSS3 part of this tutorial.

CSS3

First off, some simple styling of the body element and the “container” div.

body {
background: #f8f8f8;
font-family: arial;
font-size: 15px;
line-height: 25px;
color: #515151;
}

#container {
width: 1050px;
margin: 0 auto;
margin-top: 150px;
}

We have a good looking page with some basic text styling. Now, we’ll style the image boxes.

.imagebox {
-webkit-box-shadow: 0px 0px 3px 3px #aaaaaa;
-moz-box-shadow: 0px 0px 3px 3px #aaaaaa;
box-shadow: 0px 0px 3px 3px #aaaaaa;

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;

overflow: hidden;
position: relative;
z-index: 1;
float: left;
margin-left: 25px;
margin-right: 25px;
width: 300px;
height: 300px;
}

There’s a width and a height, some margins to seperate it from other image boxes, and some CSS3. However, the most important parts of this are the “position: relative”, the “z-index”, and the “overflow: hidden”. We need the position: relative so that we can give the element a z-index. We need the z-index so that the image is below the sliding box that goes on top of it, and we need the overflow: hidden so that the sliding box isn’t always visible.

This next CSS is just to give the image rounded corners:

.imagebox img {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
overflow: hidden;
}

Now, we’re going to style the “sliding boxes”.

.slidingbox {
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
position: relative;
z-index: 2;
margin-top: -7px;
width: 280px;
height: 280px;
padding: 10px;
background: rgba(33,33,33,0.7);
color: #ffffff;
}

Notice the CSS3 transitions. These are extremely important if you want the boxes to actually slide onto the image. Next, we have some border-radius declarations, which are for purely aesthetic reasons. We’ve got the “position: relative” and a z-index. This z-index value is higher than the one on the “imagebox”. Because of this, the “sliding box” is on top of the “image box”.

.slidingbox h3 {
font-size: 24px;
}

.slidingbox p {
font-size: 16px;
}

These are just to make the text look nice.

Now, if you removed the “overflow:hidden” from the image boxes, you would see each sliding box right under each image. However, since we want the third sliding box to slide in from the top, we’ve got to position it above the image.

#slidingbox3 {
margin-top:-607px;
}

Wonderful.

Now that all the sliding boxes are in place, we can create the “:hover” states that will allow them to slide in.

#imagebox1:hover #slidingbox1 {
margin-top: -307px;
}

#imagebox2:hover #slidingbox2 {
margin-top: -154px;
}

#imagebox3:hover #slidingbox3 {
margin-top: -307px;
}

Well, that concludes this tutorial. If you have any questions or comments, feel free to use the comment form below.