Chief Technology Officer & Photographer | Irvine, CA

No Flicker All CSS Image Hover State Trick

I’m sure it’s already out there, but I just discovered it today, and figured I’d share my recently acquired knowledge…

With one client I’m working with, I’m forced to use image only nav’s on all their sites, but on hover states, I have always been getting that little “flicker” before showing the hover state image.  Well, that’s because the image has to load into the browser cache.  So my next thought was to just put in a JS image pre-loader – and step violently back in to the 90’s…grrr…but it “works”.  I have been searching for a better way to do it, and found it today!

Basically, you use 1 image for the image you are going to apply a hover state on, like this:

Make sure you setup your CSS to only show the top half of the image, and then on hover, set the background-position to a negative value to shift it.  For instance, on this item’s hover state, you’d set “background-position:0 -30px;”.

*EDIT* – Actually, instead of moving the background positioning by pixels, as of lately, I’ve really been just setting up the images so they are equal heights to take advantage of “background-position:top OR bottom;” accordingly as Martin suggested below.

This way…both of the “images” are loaded when the page is loaded, the hover state is just hidden until you put your cursor over it.  Thanks to the site’s code for helpin’ a brotha out!

AND…I just found a blog post about this here as well ->

Header Image SEO – is it trickery?

Ok, so I have this client, which will remain nameless, but he’s currently attending a SEO seminar in CA and apparently there is some guy from Google there. Well, my client starts asking him about different SEO topics, one of them being SEO spam – or basically just trying to trick the search engines.

I did some SEO work on his site a few months back, and one of the main changes was to switch up his header so that when CSS was disabled, there would still be descriptive text read by crawlers because the hidden span would then be shown – as it was hidden using CSS. He asked the Google guy if this considered spam and sure enough, Google guy says yes, but Chuck believes different – hell, I know of several other sites that are developed this way, are they doing it wrong too?

Google says no to text behind an image or text hidden by CSS – but I’m describing the image – so am I wrong?

Can I have some support here? Basically its like this – an H2 tag with a background image set via CSS, within the H2 tag, there is a span with a class tagged to it to hide the text – that’s it. When the CSS is turned off, the hidden text appears – thus a web crawler can read it as it contains valuable information describing the content of the site and is basically a textual representation of the image. Can someone put up some supporting links to information to support either side (mine or Google guy)? I know Google is great and all, but that doesn’t mean all their employees know everything – for all I know, Google guy could be the receptionist for the kid center…