Question

85

jQuery image hover color overlay

rated 0 times [ 90] [ 5] / answers: 1 / hits: 22830 / 14 Years ago, sun, june 13, 2010, 12:00:00

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;

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ishmaelw

Add To Favorites

Follow

Total Points: 528

Total Questions: 96

Total Answers: 103

Location: Venezuela

Member since Sat, Apr 24, 2021

3 Years ago

ishmaelw questions

1 Copy text from a div to clipboard using document.execCommand in React

Fri, Apr 9, 21, 00:00, 3 Years ago

1 Puppeteer does not load images stored locally when generate PDF

Mon, Mar 22, 21, 00:00, 3 Years ago

1 Pod install error after upgrading to React Native 0.63.0

Thu, Jul 16, 20, 00:00, 4 Years ago

1 Remove a query string using react-router without reloading page?

Tue, Apr 28, 20, 00:00, 4 Years ago

1 How to listen for changes to window.location.search in 2019

Sat, Sep 21, 19, 00:00, 5 Years ago

View All

answered 14 Years ago amberlykaliac · Accepted Answer

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');

});