Create Killer Sliding Boxes with CSS3

by Ran Enoch  –  tagged , , , , ,   –  follow on Twitter here


Make a killer sliding image box for your website with the help of this insightful CSS3 tutorial and some of your ninja coding skills.

By now, everyone has seen some of the sliding box animations made possible by CSS3 features. This lesson walks you through the necessary steps to make them and will hopefully impart some other helpful knowledge along the way. It’s best viewed in HD in full screen mode.

Join us in our newest publication:

This CSS tutorial video is a perfect example of something that is fairly straight forward in following along with and executing for advanced users, but rather difficult in describing in written directions in a short post such as this. So to save everyone from confusion we will focus on the code used in the video and share it below. This way you can compare it to what you ended up with in the end.

To begin with, you need to set up the initial HTML. This gives you the basic box, and a place for the image to be placed. It also provides the shell for the slider.

<div id="montage-wrap">
	<div class="montage-block">
		<span id="block1"></span>
		<div class="thumb_content">
			<h1>Sample Title</h1>
			<p>This is a sample title. Sample text.</p>
		</div>	
	</div> 
</div>

Now, the CSS begins small, but grows in complexity with each idea introduced throughout the process. By the time you are done with all the styling, it should look something like this.

body { font: 13px sans-serif; }

#montage-wrap	{ width: 820px; height: 200px; }
.montage-block	{ width: 200px; height: 200px; float: left; display: block; overflow: hidden; position: relative; 
		margin: 0 4px 0 0; background: white; border: 1px solid #666;}
.montage-block:last-child    { margin: 0; } /* removes margin on last block */

#block1	{ width: 200px; height: 200px; position: absolute; display: block;
		background: url("pixelforlife_thumb.png") no-repeat; 

		-webkit-transition: top .3s ease-in-out; }

.montage-block:hover #block1 	{ top: -150px; }

.thumb_content	{ padding: 70px 15px 0 15px; color: #777; }
.thumb_content h1	{ margin: 0 0 5px 0; color: #666; font-size: 14px; }

And to tie everything together, your final HTML code should be something like this.

<body>

<div id="montage-wrap">

	<div class="montage-block">
		<span id="block1"></span>
		<div class="thumb_content">
			<h1>Sample Title</h1>
			<p>This is a sample title. Sample text.</p>
		</div>	
	</div> <!-- block end -->

    <!-- A sample Block -->
	<div class="montage-block">
		<span id="block1"></span>
		<div class="thumb_content">
			<h1>Sample Title</h1>
			<p>This is a sample title. Sample text.</p>
		</div>	
	</div> <!-- block end -->

</div> <!-- montage wrap -->

</body>

If you found this CSS tutorial useful, the you will also enjoy this one on rotating objects with CSS3 animations. Thanks for stopping by!

Share and Enjoy !

0Shares
0 0