Transparancy on Image with css

Hi,

I'd like to add transparency to an image. You can see an example of what I want to achieve in the attached image.  
Image with transparenceI know how to do this if I use a <div> and add the image as a background and apply rgba effect on it, but is it possible to get a similar effect with a usual image <img src---->"? If so how can I do it?

Peter
Peter NordbergIT ManagerAsked:
Who is Participating?
 
lenamtlCommented:
0
 
Chris StanyonCommented:
You can do it as part of the image, but you'd need to use an image editing package to add the overlay - something like Photoshop or Gimp.

You could also probably do it with a server-side script such as PHP, but it's not the easiest.

By far the easiest way is to overlay a div over an image. Is there a particular reason you don't want to do that?
0
 
rgranlundCommented:
Give the image a class and define the class in your css with opacity.
.YourClass img {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}
Here is the link to w3 that shows an example.
http://www.w3schools.com/css/css_image_transparency.asp
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.