Chapitre 5
Manipulation d'images
Retour Accueil CSS
46 Images alternées.
Termes CSS clés employés : :hover, opacity, transition, box-shadow.
Compatibilité navigateurs : IE10+, Firefix16.0+, Chrome26+, Safari avec préfixe, Opera12.1+.
Problématique
Afficher de façon agréable deux images alternatives.
Résolution théorique
Plusieurs méthodes sont envisageables. Nous avons choisi ici de superposer les deux images, puis de jouer sur la transparence de la première en cas de survol avec le pointeur.
Résolution pratique
Un code HTML encore une fois très simple : un élément DIV renfermant deux éléments IMG. Seul le deuxième IMG doit posséder une classe. La dimension est précisée explicitement, les deux images étant de même taille.
<IV class="conteneurimage" style="height:247px">
<img src="image1.jpg" />
<img class="image2" src="image2.jpg" />
</DIV>
Nous définissons ensuite dans le code CSS l’élément conteneur :
.conteneurimage {
position: relative;
margin:10px auto 10px;
width:500px;
box-shadow: 8px 8px 15px gray;
}
Puis l’élément IMG de base, auquel nous affectons une transition, et le deuxième élément IMG, auquel est attribué un z-index de –1 pour le placer en dessous.
.conteneurimage IMG{
transition: all 2s;
position: absolute;
left: 0;
width:500px;
}
.conteneurimage img.image2{
opacity: 1;
z-index:-1;
}
Il ne reste plus qu’à affecter une transparence totale à la première image en cas de survol avec la souris :
.conteneurimage:hover img.image1{ opacity:0;}
Remplacement d'image
Déplacez votre pointeur sur l'image pour voir l'image alternative...
Retour Accueil CSS
|
|
|---|