How to change image opacity when mouse on

So i wanna make a few images in my widgets change their opacity when the mouse is on them.I looked in google about the code but haven't found anything that is working.Hope you guys know the code, thank you in advance.

Code:

.transparent_class {  /* IE 8 */  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  /* IE 5-7 */  filter: alpha(opacity=50);  /* Netscape */  -moz-opacity: 0.5;  /* Safari 1.x */  -khtml-opacity: 0.5;  /* Good browsers */  opacity: 0.5;}

just change the class of [.transparent_class] above to what image class you want to change it to and see if that will work for you. The css is cross browser friendly.

Not working.I need something that can be added to <a href=><img src= /></a> tag so when the mouse is on that pic the opacity changed.Or something that be added to css and then some code that be added to the tag above.

Don't use inline styling, unless absoluely needed. That code above should work, you have to do this for hover state

Code:

.yourclassname:hover{

to first see if the code works for you use this

Code:

img:hover{ /* IE 8 */  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  /* IE 5-7 */  filter: alpha(opacity=50);  /* Netscape */  -moz-opacity: 0.5;  /* Safari 1.x */  -khtml-opacity: 0.5;  /* Good browsers */  opacity: 0.5;}


This will make all tags with <img> to have hover state opacity half. Once you know it works, find the class that you need to make have opacity.

then once found add

Code:

img .class{ /* IE 8 */  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  /* IE 5-7 */  filter: alpha(opacity=50);  /* Netscape */  -moz-opacity: 0.5;  /* Safari 1.x */  -khtml-opacity: 0.5;  /* Good browsers */  opacity: 0.5;}