Transparancy on Image with css


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 NordbergIT ManagerAsked:
Who is Participating?
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?
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.
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.