Mouseover Change Image Color

Question

I have a big grid of images. When a user mouseovers an image I want the image to tint blue 0000FF. Is there a way to do this in JS or jquery? Ideally, I wouldn't have to apply a class to each image. This treatment should affect all images on the screen.

After searching the forums here and elsewhere I learned that some folks use a div over the image that has a color and opacity, but how would I apply that to all img?

Another thing I keep seeing is paintbrushJS and pixastic but I don't know how to make those work for this purpose.

Here's the page I'm working on: http://www.rollinleonard.com/elements/

EDIT: the images need to be be clickable so the div can't obstruct the linked img. Is there a way to click through the div or put the div below or something? Some solutions offered don't use a div but I can't figure them out.

Thanks! Rollin

score 5 · Accepted Answer · answered Mar 03 '11 at 19:11

This is how you're gonna want to do it: http://jsfiddle.net/ztKJB/1/

Javascript / jQuery:

$overlay = $('#overlay');

$('img').bind('mouseenter', function () {
    $this = $(this);
    if ($this.not('.over')) {
        $this.addClass('over');
        $overlay.css({
            width  : $this.css('width'),
            height : $this.css('height'), 
            top    : $this.offset().top + 'px',
            left   : $this.offset().left + 'px',
        }).show();
    }
}).bind('mouseout', function () {
    $(this).removeClass('over');
});

CSS:

#overlay {
    display: block;
    position: absolute;
    background-color: rgba(0, 0, 255, 0.5);
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
}

HTML:

<div id="overlay"></div>
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/rgb-dots-olan3.jpg" width="150" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/rgb-dots-olan2.jpg" width="150" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/IMG_3291.jpg" width="225" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/1153-1188.jpg" width="200" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/P1010036.jpg" width="200" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/dressRehearsal.jpg" width="267" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/sinWave.jpg" width="225" height="150"
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/mockUp2.jpg" width="225" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/PICT0453.jpg" width="113" height="150">

Wow, thank you!!! I'm getting a real education here at stackoverflow. I had this all figured out in Flash, but the result was too heavy and wasn't as easy to update. Piecing my site back together in html has really opened my eyes. — Rollin, Mar 03 '11 at 20:35
I have a problem though... Now the links aren't clickable since the div covers it. Is there a way to avoid that problem? I've updated the page. — Rollin, Mar 03 '11 at 21:20
@Rollin: Add `pointer-events: none;` to the CSS definition of `#overlay` (see http://stackoverflow.com/questions/3538489/html-css-make-a-div-invisible-to-clicks). I have updated the linked jsfiddle with the changes. The first image links to Google. However, I don't think this is fully cross-browser solution. — mellamokb, Mar 04 '11 at 03:58
@mellamokb Jesus, I love stackoverflow. The links that spun off of that one were very informative as well. Problem solved. Thank you. — Rollin, Mar 04 '11 at 05:23

score 1 · Answer 2 · answered Mar 03 '11 at 19:01

1

The idea of using a div over the image would work. You can generate the div on-the-fly as needed (or generate a hidden div to reuse throughout the page), and position it over the image during the onmouseover event:

$('img').mouseover(function() {
    // generate a div
    // position over current image
});

answered Mar 03 '11 at 19:01

mellamokb

56,094
12
110
136

Thanks for explaining that. I think McHerbie is doing just that, right? – Rollin Mar 03 '11 at 20:44
@Rollin: Yep. His answer is brilliant! – mellamokb Mar 03 '11 at 20:53
What do you think about roryf's answer? I can't seem to make McHerbie's thing work while keeping the links. The div hides the links. – Rollin Mar 03 '11 at 22:20

roryf · Answer 3 · 2011-03-04T09:38:01.800

Append a span inside each anchor, and adjust it's opacity on hover:

<script>
$(function() {
    $('a').each(function() {
        $(this).appendChild('<span class="overlay" />');
    });
});
</script>

<style>    
    a {
        position: relative;
    }

    a .overlay {
        background-color: #00f;
        height: 100%;
        left: 0px;
        opacity: 0;
        position: absolute;
        top: 0px;
        width: 100%;
    }

    a:hover .overlay {
        opacity: 0.4; /* adjust to suit */
    }
</style>

Note: you'll need to adjust your styles so the anchors are being floated rather than the images.

If you wanted a fade in/out, you could either use CSS3 transitions or hide the span initially and use a jQuery mouseover event to fade it in:

$('a').each(function() {
    $(this).appendChild($('<span class="overlay" />').hide()).hover(function() {
        $(this).find('.overlay').fadeIn(500);
    }, function() {
        $(this).find('.overlay').fadeOut(1000);
    });
});

That looks excellent. I just can't get it to work. I tried deploying your solution here: http://www.rollinleonard.com/elements/index3.php What do you think I'm messing up? — Rollin, Mar 03 '11 at 21:33
You need to put it in a document.ready handler, will update answer — roryf, Mar 04 '11 at 09:37

score 0 · Answer 4 · answered Nov 12 '13 at 15:22

0

This jquery plugin should do the thing you asked pretty well. (tancolor.js)

$("#myImageID").tancolor({mode: "blue"});

There's an interactive demo. You can play around with it.

Check out the documentation on the usage, it is pretty simple. docs

answered Nov 12 '13 at 15:22

Nicholas TJ

1,629
18
30

Mouseover Change Image Color

4 Answers4