How can i change my "read more" to an image with hover effect?

I'm currently editing my premade layout downloaded in the internet and i would like to edit the "Read More" link to an image.

The best example that i want to achieve is like in the website of www.hongkiat.com. When you hover Continue Reading, th开发者_开发技巧e background changes.

my code in the template is this:

<div class="entry">
<p><?php the_content('Read More...'); ?></p>
</div><!--entry-->

Thank you very much in advance!

---

You can add an HTML <img> tag as a parameter:

<?php the_content('Read more...<img src="' . get_bloginfo('template_directory'). '/images/leaf.gif" alt="read more" title="Read more..." />'); ?>

---

Assuming you have

<div class="entry">
<p><?php the_content('<span class="readmore">Read More...</span>'); ?></p>
</div><!--entry-->

You can add a behavior in CSS like so:

span.readmore{background-color:red}