Bonjour les amis!
Je suis en train de réaliser une page avec un cascade d'image.
Pour chaque image de cette cascade(div class="cell"), j'aimerais lorsque l'on clique dessus, qu'une autre image apparaisse en fondu par dessus l'image que l'on vient de cliqué, et encore une autre si l'on clique à nouveau
Une sorte de carroussel dans une même div en fondu et qui peut tourner en boucle.
Pour vraiment parfaire le code, si il est aussi possible de remettre l'image de départ lorsque l'on quitte le survol de la div concernée avec la souris (cad l'image présente avant toute action de clique).
Voici le code (j'ai mis que deux div "cell" mais à terme il y en aura beaucoup plus sur la page)
PS : comme vous le constaterez dans le code css, la gestion des images est en % car le site sera en responsive
Modifié par tshinkiz (02 Nov 2013 - 03:06)
Je suis en train de réaliser une page avec un cascade d'image.
Pour chaque image de cette cascade(div class="cell"), j'aimerais lorsque l'on clique dessus, qu'une autre image apparaisse en fondu par dessus l'image que l'on vient de cliqué, et encore une autre si l'on clique à nouveau
Une sorte de carroussel dans une même div en fondu et qui peut tourner en boucle.Pour vraiment parfaire le code, si il est aussi possible de remettre l'image de départ lorsque l'on quitte le survol de la div concernée avec la souris (cad l'image présente avant toute action de clique).
Voici le code (j'ai mis que deux div "cell" mais à terme il y en aura beaucoup plus sur la page)
PS : comme vous le constaterez dans le code css, la gestion des images est en % car le site sera en responsive
<body>
<div class="container">
<div class="cell">
<a href="#">
<img class="picture" src="images/start.jpg" />
</a>
</div>
<div class="cell">
<a href="#">
<img class="picture" src="images/start.jpg" />
</a>
</div>
</div>
</body>/************************************************************************************
WIDE SCREEN (min-width: 1680px)
*************************************************************************************/
@media screen and (min-width: 1921px) {
.container {
width: 100%;
}
.cell {
width: 25%;
float: left;
}
.picture {
width: 100%;
height: auto;
}
}
/************************************************************************************
NORMAL (min-width: 1280px) and (max-width: 1679px)
*************************************************************************************/
@media screen and (min-width: 1281px) and (max-width: 1920px) {
.container {
width: 100%;
}
.cell {
width: 33.33%;
float: left;
}
.picture {
width: 100%;
height: auto;
z-index:1;
}
}
/************************************************************************************
SMALL SCREEN (min-width: 1024px) and (max-width: 1279px)
*************************************************************************************/
@media screen and (min-width: 641px) and (max-width: 1280px) {
.container {
width: 100%;
}
.cell {
width: 50%;
float: left;
}
.picture {
width: 100%;
height: auto;
}
}
/************************************************************************************
SMALL MOBILE (max-width: 479px)
*************************************************************************************/
@media screen and (max-width: 640px) {
.container {
width: 100%;
}
.cell {
width: 100%;
float: left;
}
.picture {
width: 100%;
height: auto;
}
}body {
margin-left: auto;
margin-right: auto;
text-align: center;
}Modifié par tshinkiz (02 Nov 2013 - 03:06)
