The Hover Effect Without Javascript or Jquery

We all love javascript and jquery, right? It’s the stuff that helps you do cool stuff on your site, like rotators, animated elements, and a ton more. But the problem is, if you use Javascript and Jquery to do every effect on your site, it can be a little code-intensive. It also won’t work when someone has javascript disabled.

Enter the simple elements that use nothing but HTML and CSS, and maybe some images.

What I want to demonstrate is a simple way to get a hover effect on an image, without using jquery or javascript. The way this works, basically, is the image will be the background of a div element that will reside inside a link. Actually the div does not have to be inside a link, but it does if you want the image to link to some other url. The background image actually contains two copies of your image, with the second copy having whatever hover effect you want, such as slightly darker or whatever. In the CSS code, you have the background image positioned at the top of the div, and in a hover of the same div, you have the background image positioned at the bottom. When you hover, voila! And unlike the javascript version of hover, you don’t have to wait a split second for the hover to work, since the image is already loaded!

To the rightyou can see a screenshot of the effect I’m going to show you. On the same screenshot you can also see a green button. I used the same effect on that. The button is part of a jquery slider, so it’s not like I never use jquery :)

I’m going to be using the coffee cup that’s available here. Actually I recommend this set of twitter icons, they are probably the coolest you can find.

First, I open Fireworks and find the coffee cup image I downloaded. Then I resize it to the size I need for the footer of my website. For me that’s 96px wide and 71px high. Then, I copy the image and paste it over itself. Next, move the second copy so that the top of the second copy just touches the bottom of the first copy. Then “Fit Canvas” so that the two images are now visible. Next, I select the bottom image and modify the color by reducing the saturation to nothing. This makes it greyscale. See the screenshot to the right.

Then save the image and optimize it. I save it as a transparent .PNG file, but you can also save it as a .jpg if you don’t need transparency. I personally use PNG Gauntlet to optimize the .PNG.

Then I load it into the image folder on my website, and put the following code in the CSS file:


.twitter {
float: right;
width: 96px;
height: 71px;
background: url('images/social/twitter-cup.png') no-repeat bottom;
margin: 17px 44px 4px 0;
}
.twitter:hover {
background: url('images/social/twitter-cup.png') no-repeat top;
}

My div has a class ‘twitter’. Then simply put the div in your website where you want it to appear. Just call it the same class and it will work like a charm. You can also wrap it with a link if you want it to be hyperlinked.

And that’s it! The simplest (I believe) way to have cool hover effects on your website, that works instantly since the image is already preloaded when the page loads.

See the footer of my web design site for a sample: See The Coffee Cup Here

If you implement this little trick, please let me know by commenting here or tweeting it!

About the Author

Tim Norton started designing websites in his free time in 2005 and it soon became a major source of income for his family. He taught himself coding, graphics, and whatever else relates to designing great websites. Get in touch at 6Webdesign.