AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | 
 

 Tutoriel Hover image > texte

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Millaby
Admin
avatar

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

Feuille de personnage
Xp:
391/500  (391/500)
Niveau: 50
Inventaire:

MessageSujet: 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
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://millaby-ls.forumactif.org
Millaby
Admin
avatar

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

Feuille de personnage
Xp:
391/500  (391/500)
Niveau: 50
Inventaire:

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



Le texte va, bien évidemment, ici !
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://millaby-ls.forumactif.org
 
Tutoriel Hover image > texte
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» PictureBox , propriété Image : Convertion texte -> image
» Effet grossissement d'image avec texte apparent
» Insérer une image/du texte au-dessus/en dessous des catégories
» Écrire un texte dans une image
» [Resolu] bandeau défilent d'image...saccadé

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