css - 画像へのラジオ ボタンと、ツールチップで値の上にカーソルを合わせる

Question

ラジオボタンを置き換えるために画像を使用して選択しようとしています。

これまでのところ、動作するこのコードがあります...

<table width="200">
<tr>
<td><label>
<input type="radio" name="RadioGroup1" value="111" id="RadioGroup1_0" style="display:none">
<img src="images/AddressBook-Black-128x128.png" width="128" height="128"> </label></td>
</tr>
<tr>
<td><label>
<input type="radio" name="RadioGroup1" value="222" id="RadioGroup1_1" style="display:none">
<img src="images/AddressBook-Red-128x128.png" width="128" height="128"></label></td>
</tr>
</table>

選択したアイテムの周りにオレンジ色の境界線を追加するにはどうすればよいですか? そして、画像の中央にツールチップを追加し、黒い正方形のボックスと、選択範囲が「ホバー」されたときに白いテキストで「赤い本」という言葉を追加しますか?

全部で16点あり、それぞれイメージが異なります。