Hover-Effekt bei Bildern, die als Links fungieren UND in einer Tabelle sind...

[vika]

Liebes Forum,

ich habe mich einer Aufgabe gestellt, die sich für mich gerade als zu komplex erweist.
Ich glaube aber fest daran, dass es irgendeine Lösung geben MUSS.
Vielleicht habt ihr eine für mich?

Das Problem ist folgendes:
Auf der Seite gibt es eine Tabelle, in welche Bilder eingefügt sind. Diese Bilder sind Links. Jedem Bild habe ich die gleiche class="cover" zugewiesen.
Ich möchte den Effekt erreichen, dass die Bilder beim darüberfahren mit der Maus etwas größer erscheinen.
Dazu habe ich eine zweite Bildversion erstellt, die genau 3px größer ist als die Bilddarstellung auf der Seite.
Die Größe der anderen Bilder habe ich durch
IMG.cover {margin-right: auto ; width: 120px; height: 120px; padding: 5px}
definiert.

Jetzt weiß ich nicht, wie ich den Bildern eine zweite class zuweisen kann mit dem ich dann den hover-Effekt erreiche.
Das Problem ist nämlich auch, dass ich noch andere Links (Wörter) auf der Seite, denen ich natürlich ganz andere Hover-Effekte zugewiesen habe.

Zum besseren Verständnis den Html und CSS-Code:

Html:
<div id="covergalerie">
<table>
<tr> <td>
<a href="alincoen.html" titel="Infos zur Produktion"><img class="cover" src="bilder/alincoen.jpg" alt="Alin Coen Band A No is a No" /></a>
<a href="maxprosa.html" titel="Infos zur Produktion"><img class="cover" src="bilder/maxprosa.jpg" alt="Cover Max Prosa Die Phantasie wird siegen" /></a>
<a href="maxprosa2.html" titel="Infos zur Produktion"><img class="cover" src="bilder/maxprosa2.jpg" alt="Cover Max Prosa Rangoon" /></a>
<a href="lilabungalow.html" titel="Infos zur Produktion"><img class="cover" src="bilder/lilabungalow.jpg" alt="Lila Bungalow" /></a>
</tr> </td>

<tr> <td>
<a href="dereleganterest.html" titel="Infos zur Produktion"><img class="cover" src="bilder/dereleganterest.jpg" alt="Der elegante Rest Warten auf das Ende der Welt" /></a>
<a href="arpen.html" titel="Infos zur Produktion"><img class="cover" src="bilder/arpen.jpg" alt="Arpen & The Volunteers Monday" /></a>
<a href="trioschmetterling.html" titel="Infos zur Produktion"><img class="cover" src="bilder/trioschmetterling.jpg" alt="Trio Schmetterling" /></a>
<a href="dota.html" titel="Infos zur Produktion"><img class="cover" src="bilder/dota.jpg" alt="Dota Wo soll ich suchen" /></a>
</tr> </td>
</table>

</div>

CSS:
IMG.cover {margin-right: auto ; width: 120px; height: 120px; padding: 5px}

a:link {color:C0C0C0;}
a:visited {color:C0C0C0;}
a:hover {color:white;}
a:active {color:black;}
a:focus {color:black;}

Ich hoffe da blickt jetzt noch jemand durch und hat einen Tipp für mich...
das würde mich ganz außerordentlich freuen!

 

[Tronjer]

1. Tabelle löschen. Tabellenlayout geht gar nicht und dafür gibt es auch keinen Support.
1 a. Doctype erstellen.
2. Bilder als background-images im CSS anlegen.
3. Austauschbilder per :hover deklarieren.

Alternativ zu 2 und 3: src-images mit jQuery hover() tauschen.

 

[vika]

Lieber Tronjer,

vielen Dank schonmal für deine Antwort.
Sorry, dass ich so doof nachfrage, aber meinst du mit Doctype erstellen, dass ich ein "ordentliches" html-Dokument mit Head, Body, Metadaten usw. erstelle? Das hab ich schon - was ich oben kopiert habe, war ein Ausschnitt daraus. Oder versteckt sich hinter deinem Tipp noch was anderes?
Und 2. bedeutet, dass ich die Bilder gar nicht im html-Dokument auftauchen lasse? Die sind nämlich auch ein Link - geht das denn dann?

1000 Dank und liebe Grüße!

 

[Cheffchen]

Hallo,

also das mit dem etwas größer geht mit css3 recht einfach.
Füge mal das in dein css ein. die 1.2 sagt wie groß das werden soll im verhältnis und die 300ms bzw 100ms wie schnell

img.cover:hover {
    transform: scale(1.2);
    transition: all 300ms ease 0s;
}
img.cover {transition: all 100ms ease 0s;}

Cheffchen

 

[vika]

Cheffchen, das ist ja der Wahnsinn: Genauso hab ich mir das vorgestellt und es ist auch noch super einfach!
Danke, danke, danke, danke, danke.
Du hast mich gerade sehr glücklich gemacht :)