Bonjour, Bonjour,
Aujourd'hui, mamie crash va vous apprendre une nouvelle recette


Et bien déjà je tiens à préciser que je me suis inspirée d'un tutoriel (lui) pour la base et après j'ai combiné tout ça comme je le désirais !

Bien sûr, je l'ai ici adapté à ce que j'avais envie d'avoir Vous pourrez modifier le CSS à votre guise pour adapter tout ça !

Pour obtenir l'effet montré en démonstration, voici les codes utilisés :

Partie HTML

Code:

<div id="bloc1">
   <img src="http://img48.imageshack.us/img48/4286/35so9.png" alt="" />
</div>
<div id="bloc2">
   <!-- RIEN -->
</div>
<div id="bloc3">
   <div class="texteimg">Voyez-vous ?</div>
</div>

Partie CSS

Code:

#bloc1, #bloc2, #bloc3 {
   position: absolute;      /* positionne les éléments de manière absolue */
}
 
#bloc1 {
   left: 50px;               /* écart en pixels par rapport à la gauche de l'écran */
   top: 50px;            /* écart en pixels par rapport au haut de l'écran */
   z-index: 1;            /* on définit l'index qui va déterminer la position du bloc par rapport aux autres */
}

#bloc2 {
   left: 75px;
   top: 75px;
   z-index: 2;         /* index plus grand : le bloc sera au dessus de ceux ayant une valeur inférieure */
   
   width: 100px;
   height: 60px;
   background-color: #FF0000;
}

#bloc3 {
   left: 100px;
   top: 100px;
   z-index: 3;
}

.texteimg {
   border: 2px solid #5C3E3E;
   background-color: #f5e2c1;
}

---

Explications

Bon... maintenant je vais vous expliquer le CSS.

Le code...

Code:

#bloc1, #bloc2, #bloc3 {
   ...
}

...permet d'appliquer les propriétés css communes aux différents blocs repérés par les identifiants (attribut id) bloc1, bloc2 et bloc3. On leur attribue un positionnement absolu.

Notez que vous auriez pu utiliser des classes (attribut class), et dans ce cas dans le CSS les dièses (#) devront être remplacés par des points (.)

Les propriétés...

Code:

left: 500px;
top: 700px;

...positionnent notre icone par rapport à un point de référence. Par défaut, il s'agit du coin supérieur gauche de votre écran, mais vous pouvez définir un autre point de référence comme ceci :

Code:

<div class="conteneur">
   <!-- Vos icones superposées -->
</div>

Code:

.conteneur {
   position:relative;
}

Vous pouvez bien sûr ajuster le positionnement à votre guise... Vous pourrez aussi remarquer qu'ici, l'écart entre deux icones est de 25px. (donc de 50px on passe à 75px, puis 100px).
Vous pouvez aussi régler l'écart et n'êtes pas obligé de mettre le même partout... par exemple, pour mon titre, je peux le décaler plus vers le bas en modifiant la définition CSS de l'identifiant "bloc3".

---

L'effet lors du survol

Bon... C'est pas tout, place à l'effet maintenant

Soit, en live :



Lorsque je passe mon curseur sur l'image (le contenu) placé en arrière plan, celle-ci "saute" au premier plan. Pour obtenir cet effet, il suffit de rajouter ceci dans notre CSS :

Code:

#bloc1:hover {
   z-index: 4;
}

Le fait que le z-index soit plus grand fera passer le bloc correspondant au-dessus des autres.
Et voilà =)

Bien sûr, vous pouvez rajouter plein d'effets après tout cool
Il suffit d'un peu d'imagination et de connaissance du CSS !
Bon, maintenant, je vous laisse les petits