[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.

[mat-bi]

Raczej tego nie da się zrobić w CSS, tak mi się wydaje

[krzywy36]

jednak się da (IMG:style_emoticons/default/wink.gif) dla potomnych:
po pierwsze, wszystko obejmuję divem i dodaję mój odnośnik do usuń

[HTML] pobierz, plaintext 
<div class="thumb">
    <a href="#"><img src="#" /></a>
    <a class="delete">usun</a>
</div>
[HTML] pobierz, plaintext 

obejmującemu divowi ustawiam pozycjonowanie relatywne(żeby za chwile móc pozycjonować "usun" absolutnie) i wielkość czcionki na 0,
linkowi .delete ustawiam pozycjonowanie absolutne i wartość bottom na 0,
żeby nie było problemów z <img> w <a> musiałem nadać display: block (dla img),
teraz tylko przy :hover dla obejmującego diva zwiększam czcionkę:

[CSS] pobierz, plaintext 
.thumb
{
    position: relative;
    font-size: 0;
}
.thumb .delete
{
    position: absolute;
    bottom: 0;
}
.thumb img
{
    display: block;
}
.thumb:hover
{
    font-size: 15px;
}
[CSS] pobierz, plaintext 

efekt jest dokładnie taki jak chciałem, waliduje się (xhtml 1.0 strict) i działa (conajmniej) w chromium 10 (IMG:style_emoticons/default/smile.gif) jutro sprawdzę inne przeglądarki.

Edit: w operze 11 działa, w epiphany widać bardzo mały tekst odnośnika (widocznie epiphany nie akceptuje font-size: 0)

Ten post edytował krzywy36 28.03.2011, 23:53:48

[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