1. l'hover sur le profil
Le principe peut parraitre compliquer pour ceux qui ne connaissent pas les positions et encore une fois, je vais expliquer la manière que moi j'utilise. Il existe d'autres façons qui sont certainement moins contraignantes, plus facile à mettre en place. Pour l'explication, je vais créer un carré rouge qui fera apparaitre du texte lors du passage de la souris.
"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit ..."
Dans l'exemple ci-dessus, nous avons deux div.
- Code:
-
div class="red"
Qui est la div parent et
- Code:
-
div class="blue"
qui est la div enfant.
Voilà à quoi ressemble une div parent et une div enfant si nous ne jouons pas avec des positions.
Les positions relative & absolutePour plus d'explication sur les positions, je vous coneilles de lire la documentation suivante :
position qui est l'une de documentations en français les mieux expliquer (et oui, le html/css c'est des maths).
En gros, la div parent (red) englobe la div enfant (blue) et nous souhaitons que le blue soit au-dessus de red sans qu'on puisse la voir comme ci-dessous.
"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit ..."
- Code:
-
.red{
width:200px;
height:200px;
position:relative;
background:red;
}
.blue{width:200px;
height:200px;
background:blue;
position:absolute;
top:0;
left:0;
}
Nous avons donc
position:relative pour la div red et
position:absolute pour la div blue ainsi que top:0 et left:0, pourquoi ?
Simplement car nous donnons l'ordre à la div enfant de se position sur l'axe de la div parent.
le hoverMaintenant que nous avons notre carré bleu positionné par dessus notre carré rouge, il va nous falloir le rendre transparent. Grâce à
opacity:0 - Code:
-
.red{
width:200px;
height:200px;
position:relative;
background:red;
}
.blue{width:200px;
height:200px;
background:blue;
position:absolute;
top:0;
left:0;
opacity:0;
}
"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit ..."
Et à tout faire apparaitre au passage de la souris sur le carré.
le hoverMaintenant que nous avons notre carré bleu positionné par dessus notre carré rouge, il va nous falloir le rendre transparent. Grâce à
opacity:0 - Code:
-
.red{
width:200px;
height:200px;
position:relative;
background:red;
}
.blue{width:200px;
height:200px;
background:blue;
position:absolute;
top:0;
left:0;
opacity:0;
}
"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit ..."
Nous allons créer une "sous-class" hover sur la div parent qui donnera l'ordre de faire apparaître la div enfant au passage de la souris.
div.parent:hover div.enfant.
- Code:
-
.red{
width:200px;
height:200px;
position:relative;
background:red;
}
.blue{width:200px;
height:200px;
background:blue;
position:absolute;
top:0;
left:0;
opacity:0;
}
.red:hover .blue{
opacity:1;
}
Et voilà, j'espère que l'explication est compréhensible. C'est la première fois que j'écris un tuto.
Accueil
