画像リンクの上にマウスを載せたときに、一時的に別の画像に差し替えるデザインがあります。実現にはJavaScriptが用いられることもありますが、スタイルシートだけでも作れます。（スタイルシートだけで作る方がシンプルで高速です。）

「リンクの上にマウスが載ったとき」の装飾は、hover疑似クラスで記述できます。hover疑似クラスを使って背景画像を移動させれば、画像が切り替わったような効果が出せることを利用したテクニックです。

「最初に表示するリンク画像」と「マウスが載ったとき用のリンク画像」とは、1枚の画像上に用意しておき、背景画像として半分だけ表示させるようにスタイルシートを書いておきます。hover疑似クラスを使って、背景画像の表示領域をスライドさせれば、画像が切り替わったような効果を出せます。

例えば、以下のような画像を用意しておきます。（※2つの写真を1つに合成した「1枚の画像」です。）

そして、次のようなHTMLを書きます。これは非常にシンプルです。ただリンクが1つあるだけ。スタイルシートでデザインするために、id属性を加えています。（class属性でもいいけど）

<a href="/" id="photolink">写真コーナーへ</a>

「写真コーナーへ」というリンク文字は、スタイルシートが解釈されず画像が表示されなかった場合の代替文字として機能します。背景画像としてリンク画像を用意すると、alt属性を付加できませんから、このような方法で代替文字を書いておくべきでしょう。
（※ただし、「スタイルシートは解釈されるものの、何らかの原因で画像だけが表示されなかった」場合は、文字も画像も表示されないデメリットがあります。）

そして、スタイルシートを以下のように記述します。

a#photolink {
   display: block;
   width: 120px; /* 画像1枚分の横幅 */
   height: 100px; /* 画像1枚分の高さ */
   text-indent: -1000px; /* 文字を見えなくする */
   background-image: url("linkphoto.jpg"); /* 画像ファイル名 */
}

上記のスタイルシートで、とりあえず、リンクが画像になります。その際、表示される画像は、先ほどの「2枚の写真が1つに合成された画像」の左側半分（海の写真）です。

続けて、マウスが載ったときのスタイルシートを記述します。

a#photolink:hover {
   background-position: top right; /* 背景画像の表示開始基準を右上に変更 */
}

これで完成です。
上記のスタイルシートによって、hover時（＝リンク上にマウスが載ったとき）には、背景画像の表示開始位置が（デフォルトである「左上」から）「右上」に変わります。それによって、「2枚の写真が1つに合成された画像」の右側半分（山の写真）が表示されることになります。

上記のHTMLとスタイルシートを実際に表示させてみると、以下のように見えます。

画像の上にマウスを載せると、表示される画像が切り替わった効果が得られるはずです。（実際には、背景画像がスライドして右側半分が表示されるようになっただけです。）

JavaScriptを使って切り替えるよりも、遙かにシンプルです。しかも、切り替え先の画像を別途読み込む必要がないので、切り替えも一瞬で行われるメリットがあります。なかなかお勧めです。

ちなみに、このリンクを複数個横方向に並べて配置したい場合は、floatプロパティを使う必要があります。以下のような感じで。なぜなら、リンクをdisplayプロパティを使ってブロックレベル化しているため、そのままだと横には並ばないからです。

a#photolink {
   float: left;
}

なお、background-positionプロパティを使っての背景画像表示開始位置は、hover疑似クラス側にしか記述していません。不安なら、ノーマルなa要素側の装飾にも「background-position: top left;」の記述を加えて、「左上」から描画されるよう明示しても良いでしょう。（背景画像の表示開始位置は、デフォルトで「左上」なので、上記サンプルでは書きませんでした。通常、なくても問題ないはずです。）