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

Hey Beau, what’s been going on with you?

Well blog…funny you should ask…I was just about to write a post in my blog…errr…wait a minute…

Hi everyone (feedburner says there’s 8, but I know there’s more!)!  Just wanted to kinda fill everyone in on what’s been goin’ down at the HLF lately.  First off…business for the months of May and June – off the charts!  I really don’t know how all that came to be all of a sudden, but I must be doing something right.  I say thanks to my clients for that…so um…thanks clients!

I’ve been working on a lot of random stuff lately, mostly really exercising my skills developing hotel web sites.  I’m really starting to love cutting up PSD’s and putting them in to valid XHTML and CSS – thanks to Martin and Chuck for “lurnin’ me” on how to do it the RIGHT way.  Basically, I’ve kinda thrown a wrench into the company I’m working with, as their previous developers appear to have coded something right out of 1995…eh.  I’ve really been hammering in the concept of clean & valid code to them, and they seem to be coming around, that and I’ve had to recode a lot of existing pages – oh well, job security, right?  It works for me, it keeps a constant stream of cash coming in, and I enjoy doing it – all good stuff in my book!

I’ve also been trying to keep up with my daily dose of social media on Twitter, Plurk, Facebook, and *gasp* MySpace.  It really is working out for me, because I’ve done absolutely no advertising, just networking, and I’ve secured both personal & business relationships with the folks over at WebMediaRx (ok, so he’s my roommate), GangPlank, DrawBackwards, Synergy, and other random jobs here and there.  I’m still trying to work my way through the ranks, but I think I’ve done a pretty good job at putting myself out there and further branding myself & “the little flame“.  I try to make it out to all the social events going on (there’s actually a lot more than I thought there were late last year), but it is difficult sometimes, as I have to juggle Dom’s schedule with mine, and he gets to veto daddy going to an event if he wants to!

Other things going on…still single…SHOCKER! LOL  Per my “MySpace Status”, I’m “Chronically Single” – meh, it’s probably better that way, as I’m too busy to throw a chick in the middle of my life right now anyway.  I also quit smoking as of March 1st this year.  Thanks for that goes out to my nieces, my son, Chuck, and everyone else who bugged me enough to say “dude, seriously, you really gotta quit”.  Well…I did…I quit…and I have the extra 25lbs to show for it thank you very much!

Which brings me to another point, and another goal…getting back in to the gym on a CONSISTENT basis!  I shopped for a few days a few months back for a gym that was super cheap, yet still gave me everything I needed.  I chose Bally’s, and I went for about 2 weeks…then ran in to a few personal speed bumps…fell off the wagon I had just hopped on…and here I am…several weeks later…no results.  So here we go, just like with the no smoking thing, I’m going to set another goal.  My 29th birthday is on June 25th – the day after is when I start back to the gym – full bore – and get back to my pre-wife/pre-kid/pre-divorce weight of 225lbs (hey – I’m 6’4″ – that’s Brad Pitt hawt right there!).  By 30, I want to be in shape – REALLY good shape.  Hell, I can’t have my buddy Clay pickin’ off all the chicks when we go out all the time!  Just because he’s good looking, in shape, and is a plastic surgeon is no match for my computer n3rd, non-smoking, and rather smooth persona…ok…shut it!!!

Ok…back to work…back to the gym…BeauHLF 2.0…coming soon!  Good night!

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…