Afficher masquer div opaque

Question

J'ai une galerie d'images que je voudrais effacer pour commencer, puis lorsqu'un utilisateur passe le curseur de la souris sur l'image, il passe à l'image complète. Je sais que cela est facile à faire avec plusieurs images etc ... mais je me demandais s'il était possible d'utiliser des divisions avec un niveau de transparence défini à un certain niveau lorsque la page se charge, puis lorsque l'utilisateur passe sa souris sur le l'image montre l'image correcte et atténue la div.

Dans ma tête, cela semble une idée assez simple, mais j'ai du mal à trouver des options qui n'impliquent pas de doubler les images.

Answer 1

CSS:

img { 
    opacity: 0.5; 
    -webkit-transition: opacity 0.5s linear; 
} 
img:hover { 
    opacity: 1; 
    -webkit-transition: opacity 0.5s linear; 
} 

jQuery:

$('img').css('opacity',0.5); 
$('img').hover(
    function(){ 
     $(this).stop().animate({opacity: 1}, 500); 
    }, 
    function(){ 
     $(this).stop().animate({opacity: 0.5}, 500); 
    }); 

JS Fiddle demo of both of the above techniques.

---

Pour cibler les éléments qui ne pas correspondance d'un sélecteur, vous pouvez utiliser:

$('#jQueryOnlyV2 img:not(".noFading")').css('opacity',0.5); 
$('#jQueryOnlyV2 img:not(".noFading")').hover(
    function(){ 
     $(this).stop().animate({'opacity':1},500); 
    }, 
    function(){ 
     $(this).stop().animate({'opacity':0.5},500); 
    }); 

dans lequel le sélecteur correspond à toutes les images qui ne sont pas le CSS class="noFading" qui sont contenus dans l'élément avec un id="jQueryOnlyV2".

Ceci utilise la syntaxe du sélecteur CSS3 :not(), bien que le jQuery not() puisse être utilisé de manière similaire, si vous préférez.

Revised jQuery demo.

Answer 2

$("#gallery img") 
    .css('opacity', 0.2) 
    .mouseover(function() { 
     $(this).animate({opacity: 1}, 100); 
    }) 
    .mouseout(function() { 
     $(this).animate({opacity: 0.2}, 100); 
    }); 

See it in action