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 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!