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.
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.
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.
<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.
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.
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.