11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Fond noir sur une image au passage de la souris

Bonjour,

Le titre est très mal choisi mais je sais pas quoi mettre.

Bon,

J'ai une image et je voudrais que quand la souris passe dessus, un fond noir apparaît au bas de l'image, comme quand on modifie la photo de profile sur facebook.

J'ai pas encore codé mais je suis en phase de recherche, j'ai aucune piste.

Merci et bonne journée.
Hello,

Un fond noir pour y afficher du texte, au survol de l'image par la souris ?
Tu peux avoir une structure HTML telle que celle-ci :
<div class="conteneur">
<img src="monimage.png" alt="" />
<p>Ma légende qui s'affiche au survol de l'image</p>
</div>

Et un peu de javascript, ici à l'aide de la lib jQuery :
$(function(){
    $('.conteneur p').hide();
    $('.conteneur img').hover(
        function(){
            $(this).siblings('p').fadeIn();
        },function(){
            $(this).siblings('p').fadeOut();
        }
    );
});

J'ai saisi tout ça rapidos… à vérifier et c'est pas vraiment optimal non plus mais en attendant d'une meilleure description de ce que tu souhaite obtenir, ça te permettra de voir un peu mieux la marche à suivre.
Je te conseille de commencer par faire un jsFiddle ou Codepen (ou une page de test auto-hébergée) puis de revenir la partager ici, on pourra mieux t'aiguiller.

Pour jQuery, voici la doc officielle pour les fonctions hover() (gestion des survol/arrêt du survol), siblings(), fadeIn(), fadeOut().
Modifié par audrasjb (11 Aug 2014 - 12:19)
Merci pour la réponse,

je pense avoir trouver la solution.

J'ai fait ceci: 


<div><img src = "monimage.png" /></div>
<div class="icon-add-cover"> au dessus de l'image</div>


Et mon css

.icon-add-cover{
        bottom: 40px;
        overflow: hidden;
        position:relative;
        background:black;
        opacity:0.1;
    }
    .icon-add-cover:hover{
        opacity:0.9;
    }


Je pense que c'est assez correct.

Merci quand même Smiley cligne
Sujet clos
Aller à