ansaurus

Question

Brightening an image using styles or Javascript

Answer 1

+4 A:

Why not? You can always set the background of the parent container to #fff (white) and then lower the opacity of the image.

HTML:

<div class="white">
    <img src="image.jpg" alt="Image" />
</div>

CSS:

.white { background: #fff; }
img:hover {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

Another solution is to use a JavaScript library, such as Pixastic.

Mickel 2010-04-15 10:21:29

I realise CSS < Photoshop, but that won't brighten the image as much as wash it out... Of course, it could be just what CP is after though. :)

MatW 2010-04-15 10:23:48

Added another suggestion as well, the use of Pixastic: http://www.pixastic.com/lib/docs/actions/lighten/

Mickel 2010-04-15 10:27:16

I get the errorfilter is not a known css property nameopacity is not a known css property name

CP 2010-04-15 10:27:26

I'm too slow. You may get that error, as I dont think it is valid CSS. I cannot remember why. But if it works, it works. Who cares if it validates.

Ryan 2010-04-15 10:29:03

it would be if it worked. when i hover over the image nothing seems to happen

CP 2010-04-15 10:31:59

it won't work in all browsers. What browser are you testing in?

Mickel 2010-04-15 10:35:43

ie 6 i can get the style to brighten but not on mouseover see post below

CP 2010-04-15 10:38:00

IE6 does not support the :hover psudeo class on other elements than anchors. You can get around this by turning the image to an anchor or use JavaScript to add/remove class as the user hover over the image.

Mickel 2010-04-15 10:43:09

thanks mickel I used the javascript methodThanks to all who replied

CP 2010-04-15 11:18:46

Answer 2

A:

I would use something liek:

  filter: alpha(opacity=80);
  opacity: 0.8;

As far as I know, this is the only way to accomplish it in CSS. Is that what you are after?

Ryan 2010-04-15 10:27:56

Yes, I can get it to brighten the image but its not working on mouseover so i must be doing something wrong!img class = "mouseover" .mouseover img { opacity: 0.3; filter: alpha(opacity=30); }

CP 2010-04-15 10:37:02

In this case, change that to: img.mouseover:hover { etc. }

Ryan 2010-04-15 10:41:03

the class needs to come immediately after the tag. then the selector, immediately after that. so: tag.class:selector { etc. }

Ryan 2010-04-15 10:42:11

Thanks Ryan, nearly there the hover bit doesnt work tho .img.mouseover { filter: alpha(opacity=100); opacity: 1.0; } .img.mouseover:hover { filter: alpha(opacity=30); opacity: 0.3; }

CP 2010-04-15 10:48:59

Answer 3

+1 A:

You could use CSS sprites. Create 2 versions of the image: one normal, one bright and combine them into 1 image using Photoshop or whatever you use.

There's a good explanation of what CSS sprites are here.

Of course, this may not be something you could use on your site. For example, it's probably not something you'd want to use on large images (they'd double in size). You also couldn't do it this way if the images you want to brighten come from outside sources or are uploaded by users for example. It would work well for things like navigation bar images and other UI elements.

thesonglessbird 2010-04-15 12:15:46

ansaurus

tags:

views:

answers:

Brightening an image using styles or Javascript

related questions