Rappel du premier message :
Bonsoir, en cette belle soirée de vacances je vais vous poster quelques astuces à la demande de Sparrow. La première consiste à appliquer une sorte de zoom à une image. Pour ceci il faudra combiner un peu de code Html et CSS.
Petit exemple :
Tout d'abord prenez l'image et appliquez lui une class, dans notre cas ce sera la class "zoom".
Il suffit ensuite de rajouter dans votre CSS ce petit qui bien évidemment est personnalisable selon les besoins.
Voilà c'est tout pour cette première astuce, enjoy
!
P.S ~ Cette astuce a été partagée par Sparrow lui même, mais je ne sais plus à quel moment.
P.S² ~ Remarquez que c'est aussi sur ce principe que sont fondées les infobulles...
Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide
Lien pour comprendre pourquoi le contenu n'est pas sous hide
Bonsoir, en cette belle soirée de vacances je vais vous poster quelques astuces à la demande de Sparrow. La première consiste à appliquer une sorte de zoom à une image. Pour ceci il faudra combiner un peu de code Html et CSS.
Petit exemple :
Tout d'abord prenez l'image et appliquez lui une class, dans notre cas ce sera la class "zoom".
- Code:
<div class="zoom">
<img src="URL DE L'IMAGE" alt="NOM DE L'IMAGE" />
</div>
Il suffit ensuite de rajouter dans votre CSS ce petit qui bien évidemment est personnalisable selon les besoins.
- Code:
.zoom {
height:XXXpx;
margin:auto;
text-align:center;
}
/*Largeur et hauteur image sans survol*/
.zoom img {
width:XXXpx;
height:XXXpx;
-webkit-transition: 0.5s; /*Rendre le mouvement fluide*/
transition: 0.5s;/*Rendre le mouvement fluide*/
}
/*Largeur et hauteur image au survol*/
.zoom img:hover {
width:XXXpx;
height:XXXpx;
}
Voilà c'est tout pour cette première astuce, enjoy
! P.S ~ Cette astuce a été partagée par Sparrow lui même, mais je ne sais plus à quel moment.
P.S² ~ Remarquez que c'est aussi sur ce principe que sont fondées les infobulles...
Dernière édition par Lucky Numb£r le Lun 10 Mai 2010 - 20:08, édité 1 fois
