More CSS experimentation with the site. Hover over the menu bar up there. Go on, I’ll wait. Whee, Lemming!
The image is a simple animated GIF I put together after a quick Googling. Initially I just wanted to stick the Lemming somewhere unobtrusive on the page, but after a bit of experimenting there’s really nowhere you can put it that doesn’t get a bit distracting and annoying – there’s a reason always-on, auto-playing animations mostly died with Geocities. So I opted to stick it on the menu bar and only appear on mouse over. In itself that’s easy enough – add a “:hover” selector to the menu element and it’s done. But it looks a bit jarring just flicking on and off as you move the mouse around the page so I started looking into having it fade in and out. Since I’ve no idea how to mess with the actual code of a WordPress site or theme it had to be a CSS-only solution.
At first it wasn’t looking hopeful, since it really is the kind of thing people automatically go to Javascript for and with good reason. But eventually I unearthed the fact that Chrome supports transitions on background images. Woo! I did get tripped up by the fact that if you aren’t fading from another image (and one the same size at that) it not only fades but resizes as well. Easy fix, just use another image as the default non-hover background and fade from that.
The code is all below the cut.
No Javascript or jQuery required. All CSS:
#nav
{
background-image: url(https://www.pixieland.org.uk/uploads/2014/06/navbg.png);
background-position: right 2px;
background-repeat: no-repeat;
-webkit-transition: background-image 0.4s;
-moz-transition: background-image 0.4s;
-ms-transition: background-image 0.4s;
-o-transition: background-image 0.4s;
transition: background-image 0.4s;
}
#nav:hover
{
background-image: url(https://www.pixieland.org.uk/uploads/2014/06/Lemming-Walk.gif);
}
Standard disclaimer: It doesn’t work properly in Internet Explorer, but you probably guessed that. The image animates and appears only on hover but the transition doesn’t work. hopefully one day…