It’s always nice when you can find a real use for a cool effect that you’ve figured out, and something that I’ve been doing on a lot of my sites for the past few years is a great example of thinking differently about page objects and user engagement. We’ll use the CSS hover selector :hover to trigger some hide / show effects so a simplified passive link gives more info on hover.

Ladies and gentlemen, boys and girls, I give you the incredible transforming link!

See the Pen by Dan Cruzat (@DanCruzat) on CodePen.

So we have a link with our E+C brand [ + ] initially, when the user rolls over it the text flips to the “site by E+C” credit, there’s an accompanying tag via title to round out the story. We have two child span elements in the link, one for the default label and one for the rollover label. Then it’s just a matter of having the right labels visible and hidden, depending on whether the user is on the link or no.

This is great if you’ve only got one site that you need to link, but what if you need to include credits for different talents? What about the site I did where I handled development but Karen did design? I had to adapt this idea to allow for links to both of our sites, and here’s how that looks:

See the Pen by Dan Cruzat (@DanCruzat) on CodePen.

This time, we’ve got our .sig controller class on a parent div to keep everything wrapped up nice and neat. We’re using the :hover pseudoclass on that parent to control the hide / show for all of its content, which happens to include the two links. So easy and fast.

The best part about both examples is that it’s all a matter of whether something is displaying inline or none, should sit cleanly alongside your existing styles.

:hover is rad! Abuse it today.