You can create a photo effect in your Tumblr theme that displays an image clearly when the mouse hovers over the picture, but then when the mouse is not hovering over the image, the image appears blurred. First, prepare the images you will use for the effect. Then insert two code snippets in your Tumblr theme. Note that the code is not supported in Tumblr posts, only in blog themes.

Prepare Images

To accomplish the blurred image task, you will need two nearly identical images: one copy of the original clear image and a second copy of the same image, only blurred. Use the Blur effect in GIMP or Photoshop to create the blurry appearance of the second photo. Make sure the images are the exact same dimensions.

JavaScript Code

A snippet of JavaScript code is inserted between the and tags of your Tumblr blog. The JavaScript code includes the MouseRollover and MouseOut events. The MouseRollover event instructs the clear image to display when the mouse hovers over the image. The MouseOut event defines which image to display when the mouse is not hovering over the picture.

The JavaScript code snippet to use for this effect is:

Change the “Picture1.jpg” reference to the URL for the clear original image. Change the “Picture2.jpg” reference to the URL for the blurred image.

HTML Code

The HTML code to accompany the Javascript snippet defines the size, location and layout of the image. Insert the HTML code in the Tumblr theme where you want the photo display to appear. The HTML code to accompany the Javascript snippet above is:

Replace “Picture2.jpg” with the URL to the blurred photo, which will be displayed by default. Change the “width” and “height” variables to the desired size of your rendered image.

Install Code

To install the code in your Tumblr theme, open your Tumblr dashboard, then click the “Customize” tab in the dashboard for the blog to modify. Click the “Edit HTML” option to open the theme editor. Select the Javascript code snippet to highlight the code, then press “Ctrl-C” to copy the code. Click the space in front of the “” tag in your theme code, then press “Ctrl-V” to paste the code.

Copy the HTML code, then return to the Tumblr theme editor. Find the location in the code where you want the photo effect to render. Click in the location, then press “Ctrl-V” to paste the HTML snippet. Click “Update Preview” to test the effect in the Preview window. Click “Save” to save the changes.