jQuery image overover couleur overlay

Question

Je n'arrive pas à trouver des exemples de cela ayant été fait n'importe où sur internet avant mais voici ce que je vais essayer de faire ... J'essaie de faire le plus propre moyen possible de l'exposer.

J'ai donc une galerie d'images où les images sont toutes de tailles différentes. Je veux faire en sorte que lorsque vous passez la souris sur l'image, il devient orange. Juste un effet de survol simple.

Je veux le faire sans utiliser de permutation d'images, sinon je devrais créer une image en vol stationnaire de couleur orange pour chaque image de la galerie, je voudrais que ce soit un peu plus dynamique. Mon plan est juste de positionner un div vide sur l'image absolument avec une couleur de fond, largeur et hauteur de 100% et opacité: 0. Ensuite, en utilisant jquery, au passage de la souris, je ferais l'opacité s'estomper à 0.3 ou plus, et s'estomper à zéro lors du passage à la souris. Ma question est, quelle serait la meilleure façon de mettre en page le html et css pour le faire efficacement et proprement.

Voici une brève, mais la configuration incomplète:

<li> 
    <a href="#"> 
    <div class="hover">&nbsp;</div> 
    <img src="images/galerry_image.png" /> 
    </a> 
</li> 

.hover { 
width: 100%; 
height: 100%; 
background: orange; 
opacity: 0; 
} 

Answer 1

Alors commençons par un peu plus simple HTML:

<ul id="special"> 
    <li><a href="#"><img src="opensrs-2.png" /></a></li> 
    <li><a href="#"><img src="opensrs-1.png" /></a></li> 
</ul> 

Voici ma solution:

<style type="text/css"> 
#special a img { border: none;} 
</style> 
<script type="text/javascript"> 
$(document).ready(function() { 

    $('#special a').bind('mouseover', function(){ 
     $(this).parent('li').css({position:'relative'}); 
     var img = $(this).children('img'); 
     $('<div />').text(' ').css({ 
      'height': img.height(), 
      'width': img.width(), 
      'background-color': 'orange', 
      'position': 'absolute', 
      'top': 0, 
      'left': 0, 
      'opacity': 0.5 
     }).bind('mouseout', function(){ 
      $(this).remove(); 
     }).insertAfter(this); 
    }); 

}); 
</script> 

EDIT: Avec fondu rapide, fondu:

$('#special a').bind('mouseover', function(){ 
    $(this).parent('li').css({position:'relative'}); 
    var img = $(this).children('img'); 
    $('<div />').text(' ').css({ 
     'height': img.height(), 
     'width': img.width(), 
     'background-color': 'orange', 
     'position': 'absolute', 
     'top': 0, 
     'left': 0, 
     'opacity': 0.0 
    }).bind('mouseout', function(){ 
     $(this).fadeOut('fast', function(){ 
      $(this).remove(); 
     }); 
    }).insertAfter(this).animate({ 
     'opacity': 0.5 
    }, 'fast'); 
}); 

Answer 2

Vous cherchez quelque chose comme ceci:

jQuery:

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $("#images span > img").hover(function(){ 
     $(this).fadeTo("fast",0.3); 
    },function(){ 
     $(this).fadeTo("fast",1.0); 
    }); 
    }); 
</script> 

HTML:

<div id="images"> 
    <span><img src="image1.jpg" /></span> 
    <span><img src="image2.jpg" /></span> 
    <span><img src="image3.jpg" /></span> 
    <span><img src="image4.jpg" /></span> 
    <span><img src="image5.jpg" /></span> 
    <span><img src="image6.jpg" /></span> 
    <span><img src="image7.jpg" /></span> 
</div> 

CSS:

<style type="text/css"> 
    #images span { 
    display: inline-block; 
    background-color: orange; 
    } 
</style> 

Answer 3

Heres la chose

<script type="text/javascript"> 
$(function(){ 
     $("img").hover(function(){ 
          $(this).fadeTo("slow",0); 
          }, 
          function(){ 
          $(this).fadeTo("slow",1);  
          }); 
}); 
</script> 
<style type="text/css"> 
#lookhere{ 
    background-color:orange; 
    width:auto; 
} 
</style> 
Heres the html 
<div id="lookhere"><img href="you know what goes here"></div> 

Il fonctionne et semble assez cool. Bonne idée.