regarder ceci:effet pour l'image sur mouseover
Lorsque le pointeur se trouve sur l'image que je veux un petit rect sombre en bas de cette image avec un texte. Comment puis-je faire ceci? Peut-être avec jquery?
Merci les gars.
Oui, vous pouvez facilement utiliser jquery pour y parvenir. Si vous voulez apprendre tout le processus et de le faire vous-même, jetez un oeil à ce - Sliding Boxes and Captions with jQuery Ou jeter un oeil à quelques plugins pour obtenir le même effet - 10 Stylish jQuery caption plugins
Un grand merci pour ces liens. Sont géniaux. –
pas de problème. content que je puisse être utile – bcosynot
Vous pouvez y parvenir de plusieurs façons. Selon la structure de votre page, vous pouvez accomplir cela avec quelques classes CSS.
HTML:
<div class="image_hover"><span>Text</span></div>
CSS:
.image_hover { background-image: url("path/to/image"); height: 95px; width: 270px; }
.image_hover span { display: none; }
.image_hover:hover span { display: block; position: relative; top: 80px; width: 270px; text-align: center; background-color: white; border: 1px solid black; height: 15px; line-height: 15px; }
Vous devrez faire des mises à jour en fonction de votre situation particulière. Voici un working example sur jsbin. Cette solution masque le texte par défaut et lorsque l'utilisateur survole la div, la classe: hover entraîne l'affichage du texte.
Vous pouvez également utiliser jQuery pour ajouter ou afficher le div onmouseover.
http://stackoverflow.com/questions/90579/how-to-center-text-over-an-image-in-a-table-using-javascript-css-and-or-html – N0Alias