18012 sujets

Questions générales et questions de débutants

[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.
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)
Sujet clos
Aller à