I mean something like this (look at the kids playing soccer tile). See how it increases the brightness of each pixel of the arbitrary picture? How do I do that with jQuery and/or CSS?

I mean something like this (look at the kids playing soccer tile). See how it increases the brightness of each pixel of the arbitrary picture? How do I do that with jQuery and/or CSS?

• javascript
• jquery
• css

• Could you clarify the question? I don't see any increasing brightness. You want to change the image itself? What does this have to do with the web? Shouldn't photoshop do the job? – Danny C Commented Sep 1, 2011 at 7:11
• If you are really looking for a JavaScript solution (I doubt that) this might help a little: pixastic. – m90 Commented Sep 1, 2011 at 7:12

6 Answers 6

One option is to kind of fake it with a very small inset box shadow:

 box-shadow: inset 0px 0px 5px 0px #ffff66;

Click here for an example.

Take a look at this: jsFiddle. Using a white-transparent border and the image starting at the same position as the border does the trick.

Try using this solution http://css-tricks./7423-transparent-borders-with-background-clip/ , it's not patibile with IE, versions < 9, however.

You could use the <canvas> element to get/manipulate the image pixels, have a look here: https://developer.mozilla/en/html/canvas/pixel_manipulation_with_canvas

put the image in the background of a div and set a inset box-shadow.

#myDiv{
background: url(http://dummyimage./300/09f/fff.png) 0 0 no-repeat;
-moz-box-shadow:inset 0 0 1px #fff;
-webkit-box-shadow:inset 0 0 1px #fff;
box-shadow:inset 0 0 1px #fff;
}

With the last pixel-parameter you can control the width of the inset-border

@jason; try this solution its also work in IE8 & above http://jsfiddle/sandeep/Ksr86/2/

CSS:

body{background:#000}

#test {
    background:url('http://cdn.natural-life.ca/mlb-wrap-ie6.jpg') no-repeat center center;
    width: 350px;
    height: 350px;
    position:relative;
}
#test:after {
    position:absolute;
    background:rgba(0,0,0,0.5);
    content:"";
    display:block;
    top:2px;
    left:2px;
    right:2px;
    bottom:2px;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)"; /* IE8
}