Lien pour comprendre pourquoi le contenu n'est pas sous hide
![Very Happy](https://2img.net/i/fa/i/smiles/icon_biggrin.png)
Donc je vous fais mon premier tutoriel qui va porter sur le thème " Transition ". Divers style qui vont vous permettre de décorer votre forum :)
Exemple :
![Effet Transition - Infobulle, Rotation et Agrandissement FHTNa3t](https://i.imgur.com/FHTNa3t.jpg)
HTML :
- Code:
<span class="maclasse"> <img src="https://i.imgur.com/FHTNa3t.jpg" alt="" /></span>
CSS :
- Code:
/*Image*/
.maclasse img{
width: 70px;
height: 70px;
margin: 10px;
padding: 0px;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
/*Effet sur image au survol*/
.maclasse:hover img {
-webkit-transform : rotate(360deg);
transform: rotate(360deg);
}
Exemple :
![Effet Transition - Infobulle, Rotation et Agrandissement FHTNa3t](https://i.imgur.com/FHTNa3t.jpg)
HTML :
- Code:
<span class="maclasse"><img src="https://i.imgur.com/FHTNa3t.jpg" alt="" /></span>
CSS :
- Code:
/*Image*/
.maclasse img{
width: 60px;
height: 60px;
margin: 10px;
padding: 0px;
-webkit-transition: all 1.5s ease;
transition: all 1.5s ease;
}
/*Effet sur image au survol*/
.maclasse:hover img {
width: 96px;
height: 96px;
-webkit-transform : rotate(-360deg);
transform: rotate(-360deg);
}
Exemple :
HTML :
- Code:
<div class="nu_infobulle"><img src="https://i.imgur.com/FHTNa3t.jpg" alt="" /><span class="nu_bulle">Ici les infos qui s'afficheront au survol de l'image<br /><a href="#profil">Profil</a> <a href="#mp">MP</a></span></div>
CSS :
- Code:
/*Bloc qui contient l'image et l'infobulle*/
.nu_infobulle{
width: 100px;
padding: 0px;
position: relative;
}
/*Infobulle*/
.nu_bulle{
background: #090700;
border: 0px solid #1c1706;
color: #c4c4c4;
width: 0px;
height: 0px;
position: absolute;
top: 100px;
left: 70px;
overflow: hidden;
z-index: 20;
text-align: left;
border-radius: 10px;
-webkit-transition: all 1.5s ease;
transition: all 1.5s ease;
}
/*Apparition de l'infobulle au survol*/
.nu_infobulle:hover .nu_bulle{
width: 150px;
height: 60px;
padding: 5px;
border-width: 1px;
}
Exemple :
HTML :
- Code:
<div class="transition_nu"><img width="50" height="50" src="https://i.imgur.com/FHTNa3t.jpg" alt="" /><div class="nu_transition"><h3>Mon joli titre</h3><br /><span> Ici les infos qui s'afficheront au survol de l’icône <br /><a href="#profil">Profil</a> <a href="#mp">MP</a></span></div></div>
CSS:
- Code:
/*Bloc qui contient l'image et l'infobulle*/
.transition_nu {
position: relative;
width: 50px;
height: 50px;
padding: 0px;
}
/*Bloc de l'infobulle*/
.nu_transition{
background: #090700;
border: 0px solid #1c1706;
color: #dfdfdf;
width: 0px;
height: 0px;
overflow: hidden;
position: absolute;
left:50px;
top: 0px;
z-index: 999;
padding: 0px;
text-align: center;
border-radius: 10px;
-webkit-transition: all 1s ease-in;
transition: all 1s ease-in;
}
/*Apparitiond e l'infobulle au survol*/
.transition_nu:hover .nu_transition{
height: 80px;
width: 200px;
padding: 5px;
border-width: 1px;
}
/*Image*/
.transition_nu img {
position: relative;
z-index: 990;
width: 50px;
height: 50px;
left: 0px;
bottom: 0px;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
/*Effet sur l'image au survol*/
.transition_nu:hover img {
-webkit-transition: rotate(-360deg);
transform: rotate(-360deg);
}
En espérant avoir pu vous être utile,
Xplo-sion.
PS : Sparrow style, le fondateur de Never Utopia a eu l'amabilité de créer cette section pour que l'on puisse partager avec vous nos connaissance, il serait donc normal que vous mettiez un lien sur votre forum comme quoi NU a participer à la construction du codage de votre forum.
Merci .
Dernière édition par Xplo-Sion le Mer 25 Avr 2012 - 7:28, édité 1 fois