Opacity Change on rollover

[MaTaX]

I know this is do-able with CSS, I just can't get it to work...

I have an image with a link on it, I want that image to be at about 50% opacity on it's own, but I want it to go to 100% opacity when you hover over it, how do I do this?

[Snookerman]

Try this:

img.example {
opacity: .5;
}
img.example:hover {
opacity: 1;
}
Since this is CSS3, it's not supported by all browsers yet. A solution would be to use jQuery (http://jquery.com/) for this:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function() {
$('img.example').css({
'opacity': .5
});
$('img.example').hover(function() {
$(this).animate({
'opacity': 1
});
},
function() {
$(this).animate({
'opacity': .5
});
});
});
</script>

Good luck!