This code contains a little CSS and some Java/HTML, but all in all very versatile and easy to use. I have applied it to the image above as an example.
The CSS code:
At the moment the RED part of the code is set to 0.5, meaning the image will fade by 50%. You can change the figure to lower or higher depending on your desired fade effect (for more fade, e.g. 0.1, 0.2, 0.3, 0.4. Or less fade e.g. 0.6, 0.7, 0.8, 0.9). Mostly though 0.5 is a great base.
This code needs to be added to your blog first by going to:
Template → Customise → Advanced → Add CSS
And pasting the code in the field provided. Then click the "Apply to Blog" button.
The HTML Code:
That's it! Once you have both codes added to your site your hover effect will work!
See, easy wasn't it!