Bonjour a tous,

Voici mon dernier slideshow que je me suis amusé a faire sans js.

CSS:
[code]body{
background-color:#F9F9F9;
}
img{
padding:0;
margin:0;
border:none;
}
section#slideshow{
width:590px;
height:290px;
margin:auto;
padding:0;
position:relative;
padding:10px;
}

section#slideshow figure{
opacity:0;
overflow:hidden;
padding:0;
margin:0;
}

section#slideshow figure figcaption{
background-color:rgba(0,0,0,0.3);
color:#FFFFFF;
width:100%;
margin-left:7px;
position:relative;
top:-40px;
z-index:100;
height:40px;
text-align:left;
}
section#slideshow figure p{
padding:0;
margin:0;
}
section#slideshow figure img{
padding-left:7px;
padding-top:1px;
}
nav ul#slider input[type=radio]{
display:none;
}
nav ul#slider{
margin:0;
padding:0;
list-style-type:none;
}
nav ul#slider li{
width:100px;
text-align:center;
}

nav ul#slider li figure{
position:absolute;
left:110px;
top:0;
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
}
ul#slider li label{
position:relative;
left:0;
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
}
/action/
ul#slider li input[type=radio]:checked ~ figure{
opacity:1;
}
ul#slider li input[type=radio]:checked ~ figcaption{
opacity:1;
}
ul#slider li input[type=radio]:checked ~ label{
position:relative;
left:5px;
}[/code]

HTML:
[code]<section id="slideshow">
<nav>
<ul id="slider">
<li>
<input id="ac-1" name="accordion-1" type="radio" checked>
<label for="ac-1"><img src="logo.png" width="98"/></label>
<figure id="ac-1">
<img src="logo.png" />
<figcaption>
<p>test</p>
</figcaption>
</figure>
</li>
<li>
<input id="ac-2" name="accordion-1" type="radio">
<label for="ac-2"><img src="verygames.png" width="98"/></label>
<figure id="ac-2">
<img src="verygames.png" />
<figcaption>
<p>test2</p>
</figcaption>
</figure>
</li>
<li>
<input id="ac-3" name="accordion-1" type="radio">
<label for="ac-3"><img src="3.png" width="98"/></label>
<figure id="ac-3">
<img src="3.png" />
<figcaption>
<p>test3</p>
</figcaption>
</figure>
</li>
<li>
<input id="ac-4" name="accordion-1" type="radio">
<label for="ac-4"><img src="4.png" width="98"/></label>
<figure id="ac-4">
<img src="4.png" />
<figcaption>
<p>test4</p>
</figcaption>
</figure>
</li>
</ul>
</nav>
</section>[/code]

[url=http://templates-webspell.craym.eu/css3/slideshow/]Exemple[/url]

Apres il reste a fignoler l'aspect de celui ci.

Dite moi se que vous en pensez :)

Aucune réponse