Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.



 
AccueilAccueil  RechercherRechercher  Dernières imagesDernières images  S'enregistrerS'enregistrer  ConnexionConnexion  
Le Deal du moment :
Coffret dresseur d’élite ETB ...
Voir le deal
56.90 €

 

 Tutoriel Hover image > texte

Aller en bas 
AuteurMessage
Millaby
Admin
Millaby


Messages : 46
Date d'inscription : 06/12/2014

Feuille de personnage
Xp:
Tutoriel Hover image > texte Left_bar_bleue391/500Tutoriel Hover image > texte Empty_bar_bleue  (391/500)
Niveau: 50
Inventaire:

Tutoriel Hover image > texte Empty
MessageSujet: Tutoriel Hover image > texte   Tutoriel Hover image > texte Icon_minitimeDim 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
Revenir en haut Aller en bas
https://millaby-ls.forumactif.org
Millaby
Admin
Millaby


Messages : 46
Date d'inscription : 06/12/2014

Feuille de personnage
Xp:
Tutoriel Hover image > texte Left_bar_bleue391/500Tutoriel Hover image > texte Empty_bar_bleue  (391/500)
Niveau: 50
Inventaire:

Tutoriel Hover image > texte Empty
MessageSujet: Re: Tutoriel Hover image > texte   Tutoriel Hover image > texte Icon_minitimeDim 11 Déc - 22:20



Le texte va, bien évidemment, ici !
Revenir en haut Aller en bas
https://millaby-ls.forumactif.org
 
Tutoriel Hover image > texte
Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
 :: Stock :: Codage.-
Sauter vers: