Afficher des infos en hover sur une image

[tropman]

Bonjour,
je débute dans la création de sites web et je bute sur un effet que je n'arrive pas à créer…
Le site est un wordpress. Le "loop" du site me sert à afficher uniquement les vignettes des posts (ce qui créé un effet de mur d'images…)
J'aimerai que s'affiche lorsqu'on passe la souris sur les vignettes un popup ou simplement une bande colorée avec le titre du post et un petit bouton "like" que j'ai bricolé à partir d'un plugin wordpress.
Pour l'instant le code donne ceci :

<div class="wall"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail('post-thumbnail', array()); ?></a><br>
<span class="post-meta-like"><?php printLikes(get_the_ID()); ?></span>
</div>

Mes vignettes s'affichent bien. Mon bouton like aussi (juste en-dessous). Maintenant j'aimerai, à l'aide de CSS ou de javascript reproduire l'effet dont je parlais plus haut…
(Je précise que je sais faire un effet hover avec des images et du texte… Mais pas avec une balise…)

Merci de votre aide !

 

[tatouille]

:rateau:

 

[pb88081]

Bonjour,
je débute dans la création de sites web et je bute sur un effet que je n'arrive pas à créer…
Le site est un wordpress. Le "loop" du site me sert à afficher uniquement les vignettes des posts (ce qui créé un effet de mur d'images…)
J'aimerai que s'affiche lorsqu'on passe la souris sur les vignettes un popup ou simplement une bande colorée avec le titre du post et un petit bouton "like" que j'ai bricolé à partir d'un plugin wordpress.
Pour l'instant le code donne ceci :

<div class="wall"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail('post-thumbnail', array()); ?></a><br>
<span class="post-meta-like"><?php printLikes(get_the_ID()); ?></span>
</div>

Mes vignettes s'affichent bien. Mon bouton like aussi (juste en-dessous). Maintenant j'aimerai, à l'aide de CSS ou de javascript reproduire l'effet dont je parlais plus haut…
(Je précise que je sais faire un effet hover avec des images et du texte… Mais pas avec une balise…)

Merci de votre aide !

Bonjour,
Avec un popup et en le modifiant tu pourras peut être arriver à ce que tu souhaites :
http://openweb.eu.org/articles/popup

Ici récupère le code tu gagneras du temps :
http://openweb.eu.org/IMG/article39/exemple.html

 

[Niconemo]

Je ne vois pas trop des popups dans ce cas précis (d'ailleurs je ne vois pas trop des popups du tout ).

Tel que décrit, ça peut se faire en CSS pure et dure avec des :hover et des display:none

Le code sera valide, par contre niveau accessibilité et ergonomie, c'est moyen : tu oblige le visiteur à survoler chaque image pour savoir de quoi ça parle… à moins que les images soient iconiques (qu'elles parlent d'elle-même), ou pour une galerie d'images, c'est peut-être joli mais pas forcément très fonctionnel.

---------- Nouveau message ajouté à 16h54 ---------- Le message précédent a été envoyé à 16h15 ----------

J'en ai trouvé un exemple très parlant ici (sans javascript, que du HTML/CSS).

Et avec l'usage de Jquery (ou d'une autre bibliothèque javascript) on peut sophistiquer la chose avec des effets de transition.(le tuto)

Note au passage la solution d'afficher au moins le titre au dessus de la vignette et tout le reste au survol, c'est moins brutal que de ne rien mettre du tout que ça soit fait en CSS ou avec du javascript en plus.