jQuery image hover color overlay

Question

Non riesco a trovare alcun esempio di ciò che è stato fatto ovunque su internet prima, ma qui è quello che sto andando a tentare di fare ... Sto cercando di fare il più pulito possibile modo di dirlo.

Quindi ho una galleria di immagini in cui le immagini sono tutte di dimensioni diverse. Voglio farlo in modo che quando si passa il mouse sull'immagine, si trasforma una sfumatura di arancione. Solo un semplice effetto hover.

Voglio farlo senza usare uno scambio di immagini, altrimenti dovrei creare un'immagine al passaggio del mouse di colore arancione per ogni singola immagine della galleria, mi piacerebbe che fosse un po 'più dinamico.

Il mio piano è solo per posizionare un div vuoto sopra l'immagine assolutamente con un colore di sfondo, larghezza e altezza 100% e opacità: 0. Quindi usando jquery, al passaggio del mouse avrei la dissolvenza di opacità a 0,3 circa, e ritorna a zero al passaggio del mouse.

La mia domanda è, quale sarebbe il modo migliore per impaginare l'html e il css per farlo in modo efficiente e pulito.

Ecco una breve, ma l'installazione incompleta:

<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

Quindi cominciamo con un po 'più semplice 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> 

Ecco la mia soluzione:

<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: Con dissolvenza veloce in, svanisce:

$('#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

Siete alla ricerca di qualcosa di simile:

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 il tutto

<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> 

Funziona e sembra piuttosto fresco. Bella idea