Grow your CSS skills. Land your dream job.

Matrix of Rollovers

Published by Chris Coyier

Here is a bona fide little CSS-Trick for ya'll.

I knew I could make a "matrix" of squares with rollovers. Then I got to wondering if I could duplicate that matrix of rollovers elsewhere on the screen. I figured I could using the same technique as Remote Linking. Then I got to thinking I could make the rollover in the duplicate matrix different by using a different style of rollover.

matrixrollover.png

The technique is pretty simple. The HTML for a single cell is just:

<a class="singlecell"><em>.</em></a>

The em element is what kicks over and constructs the second matrix.

The CSS is a little more complex, but it's not bad. The em gets relative positioning and a right value of 200, so it just gets kicked to the right 200px. The regular anchor element goes red on hover, and the em moves background position. Each cell has display block, a width and height of 10px, and is floated left to create the matrix.

a.singlecell {
	width: 10px;
	height: 10px;
	display: block;
	color: white;
	background-color: white;
	float: left;
}

a.singlecell em {
	position: relative;
	width: 10px;
	height: 10px;
	right: 200px;
	display: block;
	background: url(images/cell-bg.gif) top;
	text-indent: -9999px;
}

a.singlecell:hover {
	background-color: red;
}

a.singlecell:hover em {
	background-position: bottom;
}

This isn't exactly super-useful as it is, but its a kinda neat trick that I could see being adapted into something more interesting.

[LIVE EXAMPLE]

Comments

  1. Now that is cool but how we could use it? Dunno but it looks nice :D

  2. robinmitra1

    very cool…thats a lot of work though, but it doesnt work in IE, though its fine in firefox…

  3. Permalink to comment#

    Fantastic trick Chris – I’m brainstorming for it’s use already…will let you know if I come up with something :P

    Great work though.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".