Millaby Admin
Messages : 46 Date d'inscription : 06/12/2014
Feuille de personnage Xp: (391/500) Niveau: 50 Inventaire:
| Sujet: Tutoriel Hover image > texte Dim 11 Déc - 22:17 | |
| Tutoriel ▬ Hover image vers texte Bon. Avant tout, pour rendre le code plus facile, on vas utiliser la baise <*style> pour former notre code sans en avoir partout dans les pattes. La balise style s'ouvre et se ferme normalement, comme ça : - Code:
-
<style> </style> Dedans, on vas y mettre dans un premier temps l'effet sur l'image (la transition), son hover (l'effet d'animation qu'on donne à un objet) et la mise en forme du texte. On utilise la balise <*style> comme on note ses lignes dans un cadre CSS ; juste, on ne saute pas de lignes ! Exemple : Si je veux un texte en majuscules, rouge et centré, je l'inscris ainsi :
- Code:
-
<style> .texte {text-transform; uppercase; color: red; text-align: center;} </style> « texte » est le nom de ma mise en forme, je devrais donc ensuite mettre une class pour mettre en forme mon texte :
- Code:
-
<div class="texte">Mon texte sera ici en majuscules, rouge et centré !</class> Pour faire notre notre mise en forme, il vas nous falloir plusieurs lignes. Pour ce qui est de l'hover, il suffit de créer une nouvelle mise en forme, en reprenant le nom de l'ancien et d'y ajouter :hover ; voici la base : - Code:
-
<style> .img {width:200px; (LARGEUR DE L'IMAGE / IMPORTANT) height: 86px; (HAUTEUR DE L'IMAGE / IMPORTANT) opacity:0; -moz-transition: .8s ease-in; -webkit-transition: .8s ease-in; -khtml-transition: .8s ease-in; -ms-transition: .8s ease-in; -o-transition: .8s ease-in; transition: .8s ease-in;} .img:hover {width: 200px; (LARGEUR DE L'IMAGE / IMPORTANT) height: 86px; (HAUTEUR DE L'IMAGE / IMPORTANT) opacity: 1; background-color: #fefefe;} </style> Accessoirement, on rajoute le cadre derrière l'image qui mettra en forme le texte : - Code:
-
.cadre {width:200px; (IDENTIQUE A L'IMAGE) height: 86px; (IDENTIQUE A L'IMAGE) background-color: #C0C0C0; color: #000000; text-align: justify;} etc... selon l'envie ! Et voilà ! Passons maintenant à la mise en place de la mise en forme (très français). Le codage ci-dessus se trouve en début de post ; une fois celui-ci terminer, vous pouvez passer à l'écriture. Pour mettre en place notre image, nous allons l'utiliser en fond, c'est à dire avec la valeur background-image. L'opacité que nous lui avons mis plus haut en <*style> lui permet de cacher le texte qui se trouve alors derrière. - Code:
-
<div style="width: 200px; height: 86px; background-image: url(URL DE L'IMAGE);"></div> On y rajoute ensuite nos balises : - Code:
-
<div style="width: 200px; height: 86px; background-image: url(URL DE L'IMAGE);"><div class="img"><div class="cadre">Le texte va, bien évidemment, ici !</div></div></div> En gros, ça donne ça : - Code:
-
<style> .img {width:200px; height: 86px; opacity:0; -moz-transition: .8s ease-in; -webkit-transition: .8s ease-in; -khtml-transition: .8s ease-in; -ms-transition: .8s ease-in; -o-transition: .8s ease-in; transition: .8s ease-in;} .img:hover {width: 200px; height: 86px; opacity: 1; background-color: #fefefe;} .cadre {width:200px; height: 86px; background-color: #C0C0C0; color: #000000; text-align: justify;}</style>
<div style="width: 200px; height: 86px; background-image: url(http://image.noelshack.com/fichiers/2016/49/1481491194-membre-mois.png);"><div class="img"><div class="cadre">Le texte va, bien évidemment, ici !</div></div></div>
Dernière édition par Admin le Dim 11 Déc - 22:22, édité 1 fois | |
|
Millaby Admin
Messages : 46 Date d'inscription : 06/12/2014
Feuille de personnage Xp: (391/500) Niveau: 50 Inventaire:
| Sujet: Re: Tutoriel Hover image > texte Dim 11 Déc - 22:20 | |
| Le texte va, bien évidemment, ici ! | |
|