[Résolu] Effet au survol

Bonsoir, je me passionne pour la conception web depuis un bon moment. je travaille actuellement sur un projet de site web dans lequel je souhaiterais intégrer un genre d'effet au survol sur les images tel que celui du site web https://www.change.org/fr (au passage de la souris sur l'image, on a du texte avec une couleur en arrière-plan). je ne sais ni par où commencer et comment. j'ai fait plusieurs recherches sur le net, notamment google je n'ai pas trouver ce que je cherche alors je m'en remets à vous pour m'aider. Merci d'avance et bonne fin de soirée!

Bonjour,
je te propose d'utiliser Jquery, fais des recherches sur "effet survol d'image Jquery", il y bcp de chance pour que tu trouves des effets encore plus jolies que ceux que tu voulais obtenir au départ.
Bonne chance.

plop

Tu as également une solution en CSS3 via transition.

Une idée basée sur jQuery

$(document).ready(function() {
  $('.object').hover(function() {
          $(this).find('.overlay').animate({bottom: ($(this).find('.overlay').position().top-$(this).find('img').position().top)+'px'}, 200);
       }, function() {
           $(this).find('.overlay').animate({bottom:'0px'}, 200);
       });
});

HTML

<div class='object'>
    <img src='http://www.alsacreations.com/css/img/logo-alsacreations-com.png'/>
    <div class='overlay'>Ceci est un test</div>
</div>

CSS

.overlay {background-color : red; position:relative; bottom:0px; height:60px;}
img {height:60px;}
.object {height:60px; overflow:hidden; width:150px;margin:0; padding:0}

Démonstration ici
Modifié par JoDev (25 Apr 2013 - 11:26)

Merci à tous pour votre précieuse aide! Je vais opter pour la solution de JoDev. Merci Beaucoup!