CSS Kwicks

By  on  

CSS Kwicks

One of the effects that made me excited about client side and JavaScript was the Kwicks effect.  Take a list of items and react to them accordingly when hovered.  Simple, sweet.  The effect was originally created with JavaScript but come five years later, our browsers are capable of slick, efficient animations and transitions.  All this time later, I can create this same effect using a tiny bit of CSS!

The HTML

The HTML structure of kwicks is as you'd expect:  an unordered list, list items, and any rich content you'd like within them:

<ul id="kwicks">
	<li><a class="john" href="http://en.wikipedia.org/wiki/John_lennon" title="John Lennon">John Lennon</a></li>
	<li><a class="paul" href="http://en.wikipedia.org/wiki/Paul_mccartney" title="Paul McCartney">Paul McCartney</a></li>
	<li><a class="george" href="http://en.wikipedia.org/wiki/George_harrison" title="George Harrison">George Harrison</a></li>
	<li><a class="ringo" href="http://en.wikipedia.org/wiki/Ringo_starr" title="Ringo Starr">Ringo Starr</a></li>
</ul>

No changes from the original JavaScript Kwicks structure.

The CSS

All the JavaScript Kwicks did is change element widths upon list and item hover;  luckily CSS can do all of that now!

/* structure */
#kwicks { width: 590px; overflow-x: hidden; }
#kwicks:hover li a { width: 100px; }
#kwicks li { 
	float: left; 
	overflow-x: hidden; 
	display: block; 
}
#kwicks li:hover a { width: 285px !important; }

/* individual kwicks */
#kwicks li a { 
	display: block; 
	text-indent: -9999px; 
	width: 134px; 
	height: 143px; 
	transition-property: width;
	transition-duration: 1s;
}

There's a good chunk of CSS there but there are a few things to point out:

  • I've found it best to have the UL feature overflow-x: hidden; to prevent odd line-wrapping issues, even when the math makes sense
  • Two selectors control the animation width transitions; all become the short width, except the currently hovered element, which is animated to the full width

This example features only one element within each kwick, but any number of elements and right HTML can be held within each list item.

Kwicks were the super sexy JavaScript effect five years ago, but now it can be achieved with some simple CSS.  The effect itself is still nice, it's just much easier to accomplish now!

Recent Features

  • By
    Convert XML to JSON with JavaScript

    If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium.  The experience has been great:  using JavaScript to create easy to write, easy to test, native mobile apps has been fun.  My...

  • By
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

Incredible Demos

  • By
    Create a Simple News Scroller Using Dojo

    My journey into Dojo JavaScript has been exciting and I'm continuing to learn more as I port MooTools scripts to Dojo. My latest experiment is porting a simple new scroller from MooTools to Dojo. The code is very similar! The HTML The news items...

  • By
    CSS :target

    One interesting CSS pseudo selector is :target.  The target pseudo selector provides styling capabilities for an element whose ID matches the window location's hash.  Let's have a quick look at how the CSS target pseudo selector works! The HTML Assume there are any number of HTML elements with...

Discussion

  1. This is awesome! On my browser though (Chrome) the tooltip for the image keeps popping up over the pictures on the page, making the text difficult to see.

  2. Something similar
    But this one only uses CSS :)
    http://athousandnodes.com/article/css3-sliding-bannermenu

  3. Something similar
    But this one only uses CSS3
    http://athousandnodes.com/article/css3-sliding-bannermenu

  4. Am trying to get this working in a responsive way, ie. all percentage based, but no luck..

    If you have an idea, please do chip in. It has something to do with
    http://cdpn.io/cFegm

  5. Christine

    Help please. I don’t understand about the widths. Can someone explain simply? Thanks

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!