# Image Opacity in CSS



## Pande (Mar 11, 2008)

Hi guys... basically I have this code here:


```
<img src="THIS IS WHERE THE URL FOR THE IMAGE GOES" style="opacity:0.8;filter:alpha(opacity=80)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.8;this.filters.alpha.opacity=80" />
```
What I want to do is make these settings apply to all my images that I want (with the class "gallery"). I know this involves making a

img.gallery {blah blah blah}

and when I write the HTML <img> out, it should be <img class="gallery" src... blah blah blah>

Correct?

Well, I have tried a number of things to

a) get the code automatic with ALL pictures
b) get the code automatic with JUST the "gallery" pictures.

but none of this is working. I don't want to have to type the HTML every time I make a new image for the gallery, I would love it to be in CSS (because that is what its for!).

Any help making this work would be super awesome! 
If someone has the spare time to even write out what needs to go in the heading and what needs to be typed exactly in the body when I need an image that would be even more awesome!


----------



## Fyzbo (Feb 6, 2002)

You can do this with css.

img.gallery{
opacity:1;
filter:alpha(opacity=100);
}
img.gallery:hover{
opacity:.8;
filter:alpha(opacity=80);
}

This will work in most browsers.
It will only work with IE7 if in standards mode, so make sure you have a valid doctype.
IE6 only supports :hover on anchors, so you will need to either wrap the images in achors, or there are hover behaviors you can use. (here is one example, not necessarily the best http://users.hszk.bme.hu/~hj130/css/list_menu/hover/).


----------



## tomdkat (May 6, 2006)

Fyzbo said:


> You can do this with css.
> 
> img.gallery{
> opacity:1;
> ...


:up:

Peace...


----------



## Pande (Mar 11, 2008)

Well, I used it and it worked (of course) so I thank you a lot! 

The numbers were a little messed, but I switched em /changed em to what I needed and it was fine. I don't understand why it is hidden so much about it... all the internet searches brought up Javascript, not CSS, and when it was CSS, it was different (not with filter

That filter command is new to me, I will research it. 

Thanks,
Pande


----------



## tomdkat (May 6, 2006)

Pande said:


> all the internet searches brought up Javascript, not CSS, and when it was CSS, it was different (not with filter
> 
> That filter command is new to me, I will research it.


"filter" is specific to IE and "opacity" is the actual CSS setting. It's just IE doesn't support it (surprise, surprise). 

Using opacity will work with every other modern browser and filter will work for IE. Specifying both makes sure all modern browsers are covered. 

Peace...


----------

