Change thumbnail image on rollover in the loop
You could add a custom field to each of your posts called hoverImg
, which value is the link to the image you want to use as a rollover image.
Then you fetch the link in the loop, and add it:
<?php $hover_image = get_post_meta($post->ID, 'hoverImg', true); ?>
<img class="hover-img" src="<?php echo $hover_image; ?>" />
this image should be initially invisible, and positioned as an overlay to your thumbnail. Then just show it on hover with jquery.
Since I dont have your image, I've created a jsFiddle with two divs, one representing your thumbnail, and one representing your rollover image to mimic the effect:
http://jsfiddle.net/9Xa92/1/
You should just replace the <div class="hover-img"></div>
in the jsfiddle with the actual thumbnail image (created above).
精彩评论