Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery: there is a way to apply colour (tint) to an image?

Tags:

jquery

tint

there is a way to colour (apply tint) an image using jQ or some plugs? thank you

like image 969
Dee Avatar asked Dec 11 '10 09:12

Dee


2 Answers

As already mentioned in Dynamically changing image colours

take a look at Pixastic (coloradjust)

https://github.com/jseidelin/pixastic

http://www.pixastic.com/lib/docs/actions/coloradjust/

or PaintbrushJS (colour tint)

https://github.com/mezzoblue/PaintbrushJS

http://mezzoblue.github.com/PaintbrushJS/demo/

like image 147
Daniel Ruf Avatar answered Oct 13 '22 00:10

Daniel Ruf


Simplest way I can think of is overlaying a semitransparent div over the image.

A little example:

HTML

<div id="overlay" class="overlay"></div>
<img id="myimg" src="img.jpg" />

CSS

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

JS (with JQuery)

overlay = $("#overlay");
img = $("#myimg");
overlay.width(img.css("width"));
overlay.height(img.css("height"));
overlay.css("top", img.offset().top + "px");
overlay.css("left", img.offset().left + "px");
like image 44
nico Avatar answered Oct 13 '22 00:10

nico