Sliding effect in CSS3 without JS help? No problem! ;)

Somebody of you can have no clue, of the possibilities that CSS3 is offered. By using only CSS3 you can get very nice effect of sliding text and make a beautiful slider. All because of special CSS3 properties, called 'transition' and 'overflow', which combined together, give the following effect:

The code is very simple:

	#menu a {
	display: block;
	height: 100px;
	width: 300px;
	overflow: hidden;
	background: #800080;
	text-decoration: none;
	color: #ffffff;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border: 1px solid #ffffff;
	border-radius: 20px;
	text-align: center;
	}
	#menu h6 {
	text-align: center;
	color: #ffffff;
	margin-top: -10px;
	padding: 0px;
	font: 1em/100px 'Italic';
	text-transform: uppercase;
	text-shadow: 1px 1px 1px #678678;
	-webkit-transition: margin-top 0.5s linear;
	-moz-transition: margin-top 0.5s linear;
	-o-transition: margin-top 0.5s linear;
	transition: margin-top 0.5s linear;
	}
	#menu div {
	font: 1em/100px 'Italic';
	text-transform: uppercase;
	text-shadow: 1px 1px 1px #678678;
	color: #000000;
	height: 100px;
	background: #FF0000;
	padding-top: 35px;
	}
	#menu a:hover h6 {
	margin-top: -170px;
	}

view raw style.css hosted with ❤ by GitHub