Blur Hover Effect

As you may have noticed in my Photo Essay, I chose to place each image in a separate page, as many of you did, and navigate through each page to view the essay.  For my navigation, however, I simply used the photo as the means for advancing to the next page.  This both simplified and created a challenge for me:  on one hand, it kept the stream-lined, simple design I was going for, on the other, it leaves my audience with little understanding of how to advance to the next page.

With that challenge in mind, I set out to find a hover effect that suited my need.  I came across a fantastic website that has all sorts of simple tutorials for both CSS and HTML, as well as other languages, that provides a demo, gives you the CSS and HTML code to copy, and walks-you through the design purpose and techniques for implementing it yourself.  If you’re looking for some help learning something fun, check it out:  http://designshack.net

For me, I found the Blur Effect would work perfectly.  Here is how to implement it:

The blur effect is a fairly simple line of code that when used, creates a blurry view of the image it is applied to when a mouse rolls over it.  So the end result will look something like this:

Image

To begin, insert a section of code into your CSS titled “.blur img”.  The tutorial advised adding several lines of transition code to tell each browser what to do with this effect since it is a newer effect for CSS5.  Then followed the direction to use this effect only when hovered, as noted in the “.blur img: hover” code.

Image

Then, go to the HTML sheet with an image you would like to apply the blur effect to and add the class distinction into the code.  The tutorial suggests keeping this section of code within a <div>, if you haven’t done so already.

Image

And there you have it!  You now get a blury image when hovered to signal your audience that this action will take them forward (in my case).

Image

-SC

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s