How to Make a Picture Blur When the Cursor Isn't on It in Tumblr
By Tammy Columbo
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 <head> and </head> 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:
<script language="javascript"> function MouseRollover(MyImage) { MyImage.src = "Picture1.jpg"; } function MouseOut(MyImage) { MyImage.src = "Picture2.jpg"; } </script>
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:
<div align="center"> <!--Image displays here.--> <img src="Picture2.jpg" border="0px" width="500px" height="500px" onMouseOver="MouseRollover(this)" onMouseOut="MouseOut(this)" /> </div>
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 “</head>” 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.
References
Writer Bio
Based in the live music capital of the world, Tammy Columbo continues to work in the information technology industry as she has done for more than 10 years. While living in Austin, Columbo has contributed to high profile projects for the State of Texas, Fortune 500 technology companies and various non-profit organizations. Columbo began writing professionally in 2009.