CSS – remove linked image underline

Probably the most straight-forward way is to give links that contain images a class, like:
<a href="xxx" class="image"><img src="x" alt="" /></a>
and put in your stylesheet:
.image {
text-decoration: none;
border-bottom: none;
}

Wow… that worked almost perfectly, with one little addition that I was able to figure out myself. Since the mouse hover was also underlined (instead of dashed), i had to add another little piece of code to the stylesheet, namely
.image:hover {
text-decoration: none;
border-bottom: none;
}

Thanks a lot, now it works like a charm!

You can group these together like
.image, .image:hover {

argh. can’t get it to work for my blog sticker/button images things. followed the instructions to the letter and double checked my code. but there’s still an underline.

forget about the “reading list” book cover images. those images are part of another plugin… but the blog stickers are using good old fashion html

<li id="groupies"><?php _e('Groupies:'); ?>
<ul>
<li><a href="https://shittyblogsclub.blogcafe.com/shittyblogsclub" class="image" target="_blank" ><img src ="https://www.fish8me.com/images/shittyblogclub.gif
" border="0" Title="Shitty Blogs Club" alt="" ></a></li>
</ul>
</li>

any ideas?
https://www.fish8me.com