How to change opacity in disabled state of image in css

As stated by W3C:

An element is said to be actually disabled if it falls into one of the following categories:

• button elements that are disabled
• input elements that are disabled
• select elements that are disabled
• textarea elements that are disabled
• optgroup elements that have a disabled attribute
• option elements that are disabled
• fieldset elements that have a disabled attribute

Note: This definition is used to determine what elements can be focused and which elements match the :disabled pseudo-class.

So, you should not use :disabled for images. You should to find some other way.

The best possibility should be to use an input tag with the type attribute image.

This way to can make use of the disabled attribute:

input[type=image]:disabled
{
    opacity:0.5;
}

<input type="image" 
    src="http://i.stack.imgur.com/AkfB4.png"
    border="0" disabled />

If you don't want the a form to submit when you click it, you should add onclick="return false;" to the input tag.

Another possibility as mentioned by @DevonBernard is to add a class disabled, and use CSS to get the opacity right.

img.disabled
{
    opacity:0.5;
}

<img src="http://i.stack.imgur.com/AkfB4.png" 
    alt="Image" class="disabled">

If you do want to use the disabled attribute (even though you shouldn't) , another possibility is to use the attribute selector by using:

img[disabled]
{
    opacity:0.5;
}

<img src="http://i.stack.imgur.com/AkfB4.png"
    alt="Image" disabled>

This is not the correct way, since the disabled attribute should not be used on images in the first place. Also some browsers might not support this (now or in the future).