The Blog of Josh Stodola

Today I am going to share an interesting and super-cool way to create a dynamic hover effect for images. I call this flexible format the "cookie-cutter effect", and you'll find out why in a moment. First, I shall go off on a tangent to maintain my reputation. This day in age, alot of navigational bars on web sites are image-based. Designers prefer to use graphics because it helps make the navigation more stunning and visually appealing (eye candy). Another thing that is becoming nearly mandatory is a hover effect for each of the links, meaning the image changes slightly when the user has positioned their cursor over it. This sends an instant visual cue to the user and lets them know exactly what they are pointing at. It may seem a little silly to think a user does not know where their mouse is pointed, but that certainly is not the case. The map in the center of your local shopping mall with a big arrow that says "You are here" is not silly either, it is actually helpful to some. Unfortunately, there is a pretty durastic downfall to using graphics for key elements such as navigation: they seriously lack extensibility. Say you want to increase the brightness of the hover effect by a few shades. This task, at the very least, requires knowledge of a graphics editing program. Usually some design talent is required too. In many cases this situation cannot be avoided, but the approach that I am discussing in this post will at the very least allow greater flexibility than the norm.

Let's Begin

To demonstrate the technique, I went ahead and created some random image with my first name next to an odd shape. I stuck the shape in there to illustrate that this approach is applicable to more than just textual images. In the end, the main part of this image (currently white) will be able to be changed to any color we want using CSS only. Consider the base image to the right as the opposite of what we want. The plan is to turn the text into the transparent part, and the background of the the image to a solid white. The result will be somewhat of a template, if you will. We will be able to use any background color or image behind it to essentially alter the part of the image that is actually intended to represent the foreground. I became aware of the usefulness of this concept when I read Jason Santa Maria's post the other day about his new blogging expedition. He intends for each post to have its own design theme/color scheme. Currently, he has the inverse effect of what I am demonstrating in this post; the background color of his navigational links change. This was accomplished by using normal transparent images like the one above, and is still flexible and cool. But, what if you want the color of the text to change? I'm sure Jason knows the answer.

Cut It Out

And this is where the term cookie-cutter is derived. When you cut shapes out of the dough, you are left with with a transparent version of the shape (commonly referred to as a cutout). You could slide a piece of regular paper underneath it to make the shape display as white. You could quickly and easily switch to a yellow paper and change the color of the entire shape. You could even slide a photo of yourself under it! This "theory" offers up quite a bit of flexibility, and I am going show you how to bring it to the web. I guess the toughest part of replicating this concept is the actual creation the image. I will be using Adobe Photoshop CS2 to do it. This amazing piece of software makes the task much easier to accomplish than I originally anticipated.

Photoshop Time

I am a Photoshop newbie, so this should not be difficult to follow. To start off, here is a screenshot of my Photoshop window to show you where I am at (I added a temporary black background so the text is more legible)…

First, merge the text and shape layers together…

Execute the Select All command by pressing Ctrl + A. Then select the Move Tool  from the toolbox. By pressing any of the arrow buttons on your keyboard, Photoshop will automatically select the contents of the layer (does anybody know an easier way to do this?)...

At this time we want the inverse of the current selection – the transparent part. This can be accomplished easily by using the keyboard shortcut Ctrl + Shift + I. Here is the result...

Now we shall fill the transparent selection with a solid white color. You could use a texture or a gradient here if you wanted to, but I am using plain old white. The keyboard shortcut for Fill is Shift + F5, and here is the result...

After performing the Fill, the image looks like a solid white canvas. But we still have our selection, and we will want to inverse it again by pressing Ctrl + Shift + I. Then press delete to clear/erase the selection...

Press Ctrl + D to deselect and get a clearer view of the image. Now it's time to add a slight Gaussian Blur to make the edges of our "cutout" nice and smooth...

The wonderful PNG image format will allow the blur to accurately blend with anything behind it. To save the image, choose "Save for Web" from the File menu. Be sure to select PNG-24 image format with transparency...

Below is the final result, with a two-pixel black border added to it. As you can see, it blends in with the background perfectly...

Utilizing The Flexibility

It is fairly easy to bring this into a web page and add a hover effect. All you essentially need to do is apply a background color to the image with CSS. I've setup a live demo page which shows a few different ways to implement this idea, including some that use SEO-friendly image replacement.

• View the Demo
• Download cutout.zip (7kb) 

And that's all the time I have today, folks. Please let me know if you found this useful.