Races Page Effect

Hover Over Image Effects

On the Races page, all of the images will change when the mouse cursor is over them. Very similar to our Gnome over here:

The first step is to get your images. I use two different images, one of just the Gnome, and the other with the Gnome and “Gnome” text on top of her.

The following code will be what you put into your CSS. We will be defining specific link classes, and the behaviors of those specific links when a mouse pointer hovers over them.

.gnomeLink {background: url(‘put your first picture here’) bottom;opacity:0.7;display:block; width:136px;height:248px;background-size:136px 248px;text-indent: -99999px;}
.gnomeLink:hover {background: url(‘put your hover over picture here’);opacity:1.0;background-size:136px 248px;}

Now we have to actually put the link onto our page. The following is the code I’m using for our Gnome here:

<div style="position:relative;float:right;left:0px;top:0px;">
<a class="gnomeLink" href="link of the page you want to go to">

When I was putting all of these up on my Races page, I didn’t use the float command you see here. The first image is position:relative, all of the rest are position:absolute. For me, it took a fair amount of trial and error to get everything lined up correctly.

Back to Tutorials

Races Page Effect

Tyellador Thorvaldr Thorvaldr