maximamus,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div {
width: 200px;
height: 100px;
}
.tab1 {
background: #FFCC00;
}
.tab2{
background: #66CC66;
}
.tab3 {
background: #3399CC;
}
label {
transition: all 0.8s ease-out;
width: 200px;
height: 100px;
position: absolute;
left :0;
top: 0px;
}
#slide1:checked ~ div label:nth-of-type(1),
#slide2:checked ~ div label:nth-of-type(2),
#slide3:checked ~ div label:nth-of-type(3){
left: 200px;
}
#slide1:checked ~ div label:nth-of-type(3){
left: 400px;
}
#slide1:checked ~ div label:nth-of-type(2){
left: 0px;
}
#slide2:checked ~ div label:nth-of-type(1){
left: 0px;
}
#slide2:checked ~ div label:nth-of-type(3){
left: 400px;
}
#slide3:checked ~ div label:nth-of-type(2){
left: 400px;
}
#slide3:checked ~ div label:nth-of-type(1){
left: 0px;
}
input{
display: none;
}
.gr{
width: 600px;
position: relative;
height: 100px;
border: 5px #FF0033 solid;
}
.gr div{
float: left;
}
</style>
</head>
<body>
<input type=radio name=slider id=slide1 />
<input checked type=radio name=slider id=slide2 />
<input type=radio name=slider id=slide3 />
<div class='gr'><label for=slide1><p>Lorem ipsum dolor sit amet, consectetur </p></label><div class='tab1'></div>
<label for=slide2><p>Lorem ipsum dolor sit amet, consectetur </p></label><div class='tab2'></div>
<label for=slide3><p>Lorem ipsum dolor sit amet, consectetur </p></label><div class='tab3'></div></div>
</body>
</html>