jQuery image hover color overlay

Question

Кажется, я не могу найти примеров того, что это было сделано в любом месте в Интернете, но вот что я собираюсь сделать ... Я пытаюсь сделать самое чистое возможный способ ее выведения.

Итак, у меня есть галерея изображений, где изображения всех разных размеров. Я хочу сделать так, чтобы при наведении на изображение изображения он превратился в оранжевый оттенок. Просто простой эффект наведения.

Я хочу сделать это, не используя обмен изображениями, в противном случае мне нужно будет создать оранжевое цветное изображение для каждого изображения галереи, я бы хотел, чтобы это было немного более динамичным.

Мой план состоит в том, чтобы позиционировать пустой div над изображением абсолютно с цветом фона, шириной и высотой 100% и непрозрачностью: 0. Затем, используя jquery, при наведении курсора мыши у меня будет непрозрачность, равная 0,3 или около того, и исчезают до нуля при выводе мыши.

Мой вопрос в том, что было бы лучшим способом компоновки html и css, чтобы сделать это эффективно и чисто.

Вот краткий, но неполная установка:

<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

Итак, давайте начнем с немного более простой 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> 

Вот мое решение:

<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: С быстрым нарастающий, исчезают:

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

Вы ищете что-то вроде этого:

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 вся вещь

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

Он работает и выглядит очень круто. Хорошая идея.