The code you pasted above will indeed do this, but it will do it for every single image in the website, which I don't think will be such a good idea.
"mouse overs the image" is called the 'hover' effect, and if you notice your second block of code has the :hover, so first block of code is when the image is normally seen, and the second block takes over when a mouse hovers over the image. \\
Please try this instead
a) add this to your Quick CSS in the backend or to custom.css
filter:alpha(opacity=100); /* For IE8 and earlier */
filter:alpha(opacity=40); /* For IE8 and earlier */
and add this to the content of your post or page. Just change the 'src=' to a url which leads to an image, and change 'href=' to a url link to a page. Just make sure that 'class=image1' is not touched since its defined in the css above as such.
<a href="your link url"><img src="resources/your image.jpg" alt="" /></a>
img is a tag reserved for all images, thus it didn't work for you as you wanted.