[css] Specyficzne ukrywanie/pokazywanie elementów., z użyciem :hover. Opcje

[krzywy36]

Mam mały problem i nie mam pomysłu na jego rozwiązanie, sprawa wygląda tak:
mam miniaturki zdjęć wyświetlane w taki sposób

[HTML] pobierz, plaintext 
<a href="sciezka_do_zdjecia"><img src="sciezka_do_miniaturki" /></a>
[HTML] pobierz, plaintext 

chcę do każdej miniaturki dodać linki ("usuń"), które miały by być wyświetlane przy dolnej krawędzi miniaturki wewnątrz niej po najechaniu na obrazek.
Inaczej mówiąc, mam powiedzmy miniaturkę 100x60px, po najechaniu na nią pojawia się "na" obrazku link "usuń" tak aby miniaturka nie zwiększyła swoich wymiarów.
Jakieś pomysły jak zrobić to w css bez użycia js? Miniaturka nie będzie miała konkretnych wymiarów więc miło by było gdyby rozwiązanie działało niezależnie od nich.

[ixpack]

Dam Ci mój kod - i go sobie przerób (IMG:style_emoticons/default/wink.gif)

Zasada działania prosta: mamy div, w divie mamy kolejne (IMG:style_emoticons/default/wink.gif) a te są linkami, linki mają swój background, w wypadku hover - przesówamy background (IMG:style_emoticons/default/wink.gif) oczywiście możesz to uprościć do 1go linka, pokaż jako block, ustaw background np: masz obrazek widoczny (link) 100x100 - to tworzysz background 200x100, ustawiasz background o pozycji 0 0 - czyli bez przesunięcia, link o rozmiarach 100x100 pokaze część obrazka - w wypadku hover ustawiamy backgrount -100 0 - czyli przesuwamy go do góry o 100 jednostek (IMG:style_emoticons/default/wink.gif)

[CSS] pobierz, plaintext 
#hp_ {
	position: relative;
	padding: 0;
	width:975px;
	height:651px;
}
 
#hp_ div {
	display: block;
	position: absolute;
	list-style: none;
	margin: 0;
	padding: 0;
}
 
#hp_ a {
display: block;
text-indent: -9999px;
text-decoration: none;
outline: none;
cursor: default;
}
 
#hp_top {
	top:0;
	left:0;
	width:975px;
	height:375px;
	background: url("../css/hp_.jpg") 0 0 no-repeat;
	z-index:1;
}
 
#hp_top a{
	width:975px;
	height:295px;
}
 
#hp_top_b {
	top:290px;
	left:330px;
	z-index:2;	
}
 
#hp_top_b a {
	width:585px;
	height:80px;
	background: url("../css/hp_.jpg") -330px 290px no-repeat;
}
 
#hp_middle {
	top:383px;
	left:0;	
	z-index:1;
}
 
#hp_middle a {
	width:975px;
	height:100px;
	background: url("../css/hp_.jpg") 0px -750px no-repeat;	
}
 
#hp_middle_b {
	top:483px;
	left:0;	
	z-index:2;
}
 
#hp_middle_b a {
	width:975px;
	height:50px;
	background: url("../css/hp_.jpg") 0px -850px no-repeat;	
}
 
#hp_bottom_left {
	top:536px;
	left:0;	
	z-index:2;
}
 
#hp_bottom_left a {
	width:490px;
	height:115px;
	background: url("../css/hp_.jpg") 0 -1050px no-repeat;
}
 
#hp_bottom_right {
	top:536px;
	left:490px;
	z-index:2;
}
 
#hp_bottom_right a {
	width:485px;
	height:115px;
	background: url("../css/hp_.jpg") -490px -1050px no-repeat;
}
 
#hp_top a:hover {
	cursor: pointer;
	background: url("../css/hp_.jpg") 0 -375px no-repeat;
}
 
#hp_top_b a:hover {
	cursor: pointer;
	background: url("../css/hp_.jpg") -330px -665px no-repeat;
}
 
#hp_middle a:hover {
	cursor: pointer;
	background: url("../css/hp_.jpg") 0px -900px no-repeat;
}
 
#hp_middle_b a:hover {
	cursor: pointer;
	background: url("../css/hp_.jpg") 0px -1000px no-repeat;
}
 
#hp_bottom_left a:hover {
	cursor: pointer;
	background: url("../css/hp_.jpg") 0 -1165px no-repeat;
}
 
#hp_bottom_right a:hover {
	cursor: pointer;
	background: url("../css/hp_.jpg") -490px -1165px no-repeat;
}
 
[CSS] pobierz, plaintext 

[HTML] pobierz, plaintext 
<div id="hp_">
	<div id="hp_top"><a href="./?page=1&ref=14">Elisa Cavaletti</a></div>
	<div id="hp_top_b"><a href="./?page=sign_in&vp=vp">Join VIP Club</a></div>
	<div id="hp_middle"><a href="./?page=6">Mother&acute;s Day</a></div>
	<div id="hp_middle_b"><a href="http://www." target="_new">Mother&acute;s Day</a></div>
	<div id="hp_bottom_left"><a href="./?page=1&ref=3">Arianna</a></div>
	<div id="hp_bottom_right"><a href="./?page=1&ref=17">Lauren Vidal</a></div>
	</div>
[HTML] pobierz, plaintext