Chargement…
Afficher Texte Sur Image Au Passage Souris

Afficher Texte Sur Image Au Passage Souris



Dans ce web design tutoriel, on va vous montrez comment afficher des détails et du texte sur image au passage souris avec CSS3 et Jquery. Des sites e-commerce et autre utilise cette technique pour afficher les détails d’un produit sur un panneau. Dans ce tutoriel on va utiliser des codes très simple et cela par deux méthodes, une avec CSS et une autre avec Jquery.

Afficher Texte Sur Image Avec Jquery et CSS3

Structure de la page

Dans les deux cas que ce soit en Jquery ou css on auras besoin de la librairie Jquery pour que cette effet marche au passage de la souris. Dans la partie HTML Avec Jquery on utilise une seule ligne :

Afficher Texte Sur Image Au Passage Souris

On insère tous les détails, a savoir le Lien, l’image Vignette (1-p.jpg), image en grand (1-g.jpg), le texte qui s’affichera au panneau (data-date= »Jan 24th, 2014″ et contenu=…)
Note : Pour la date on a utiliser une attribut HTML5, pour les images vignettes ils ont une résolution de 190×188 et les grandes images une résolution de 522×338.

Dans la partie CSS3 on utilise plus de déclarations pour afficher l’effet Hover (passage de la souris) ainsi que le contenu de nos panneaux :

Afficher Texte Sur Image Au Passage Souris CSS3

La class= »hvrlink » est celle charger de l’effet au passage de la souris.



Laisser un commentaire