[Solved] How is this done? [closed]

As Kyle said, there are many ways to go about this task. The easiest (and most browser-compliant) way would probably be to do a simple jQuery hover effect- when the image is hovered over, another image appears and fades on top of it. The second image, of course, is most likely a transparent PNG, which makes it look like the original image is morphing.

There are many implementations of this in jQuery- doing a quick Google search yields several results. Here are a few SO posts, for example:

Edit #2

Whoops, I posted links for swapping and not overlays. Overlays are also fairly simple to do, here’s a link for those:

JQuery mouseover image overlay

Edit

This StackOverflow answer uses CSS3 instead of jQuery. However, as a commenter noted, depending on your requirements this may not be functional for the browsers you need to support.

In regards to your second question, regarding the mobile environment- I would recommend leaving out the hover effects for any mobile versions of your site. That way, you’re focusing on delivering the just the content, which is much more important than UI effects on mobile devices. If you want to still have some effect though, you could detect iOS/Android/WP8/etc user agents and have the hover effect instead be the a:active effect for the image links.