Thumbnail on main page, bigger image on full post

You may have seen those fancy templates, that display on the main page a snippet of the post's text along with a thumbnail of an image inside the post. Maybe you want something like that only from time to time, so installing a new template for that would be overkill and maybe constrains your other options. I will show you how you can do it with a little javascript or CSS for example in Simple template.

Now the whole post text is opened, and the big image is showing instead of the thumbnail.

This is accomplished with some simple javascript or CSS, which is placed near <--more-->. If using javascript, the start of this post looks something like this:

Data provided by Pastebin.com - Download Raw

The trick is to show the thumbnail on main page (if javascript is enabled), and hide it again when the whole post is opened (when we go past <!--more-->). I used here also the jump break hack (first html line of the post). If javascript is not enabled, then we fallback gracefully to only showing a snippet of the post's text on the main page.

---

Update Jan 7th 2012: As Beben suggested in comments, this can be done with only CSS, no javascript required. Show the thumbnail by default, and after we go past <!--more--> we'll introduce a new style for the thumb, which forces it to hide. Nice. Looks something like this:

Data provided by Pastebin.com - Download Raw

This post uses now the CSS solution, but the javascript solution is visible in the source too, but the code lines are commented out.