Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery image hover color overlay

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;
}
like image 886
goddamnyouryan Avatar asked Jun 13 '10 03:06

goddamnyouryan


2 Answers

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');
});
like image 116
artlung Avatar answered Oct 03 '22 18:10

artlung


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.

like image 27
Theopile Avatar answered Oct 03 '22 16:10

Theopile