jQuery image hover color overlay

Question

I can't seem to find any examples of this having been done anywhere on the internet before but here is what I am going to attempt to do...I'm trying to go about the cleanest possible way of laying this out.

So I have an image gallery where the images are all different sizes. I want to make it so that when you mouseover the image, it turns a shade of orange. Just a simple hover effect.

I want to do this without using an image swap, otherwise I'd have to create an orange colored hover-image for each individual gallery image, I'd like this to be a bit more dynamic.

My plan is just to position an empty div over the image absolutely with a background color, width and height 100% and opacity: 0. Then using jquery, on mouseover I'd have the opacity fade to 0.3 or so, and fade back to zero on mouseout.

My question is, what would be the best way to layout the html and css to do this efficiently and cleanly.

Here's a brief, but incomplete setup:

<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

Are you looking for something like this:

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 2

So let's start with slightly simpler 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>

Here's my 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: With fast fade in, fade out:

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

Heres the whole thing

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

It works and looks pretty cool. Nice idea.