Hoover Effekt zeigt vergrößertes Bild nicht an

[nomis2001]

Hallo Experten,

ich wende mich etwas verzweifelt an Euch, in der Hoffnung das jemand den Fehler findet.

Ich habe auf unserer Seite vom Weingut, die Weinflaschen als kleine Grafik dargestellt. Diese möchte ich beim Überfahren mit der Maus, gerne per Hoover-Effekt vergrößtert darstellen.

Hierzu bin ich innerhalb der HTML-Datei wie folgt vorgegangen:

<div id="content">
&nbsp;<h2><img src="images/ill_title.jpg" alt="Weingut Kurth" width="63" height="20" />Unsere Weinkarte </h2>
<p>
Unser Angebot umfasst derzeit vier trockene Rotweine. Jeder mit seiner besonderen Note und dem eigenen Geschmack. Unsere Preisliste steht auch als PDF-Download zur Verf&uuml;gung. <a href="preisliste.pdf" target="_blank">Zur Preisliste</a><br> <font size="-2">(kostenloser PDF-Reader notwendig)</font>.
</p>
<p>
<table  width="100%">
  <tr>
#-- hier geht es dann los, mit dem Anzeigen des Bilder --
 
    <th rowspan="2" height="150px" valign="top"><li><a href="#"><img src="images/parat_fl.jpg" class="left" alt="Weingut Kurth, 53474 Ahrweiler"><img scr="images/parat_big.jpg" alt"Parat jemaat" class="gross"></a></li> </th>
    <td><img src="images/parat.jpg"></td>
  </tr>
  <tr>
    <td valign="top">2007er Rotwein<br>
    Cuv&egrave;e <br>
Qualit&auml;tswein b. A. </td>
  </tr>

Und innerhalb der css habe ich den "content" container wie folgt definiert:

#content {
margin: 0em 160px 20px 160px;
padding: 0 10px 0 10px;
line-height: 1.6em;
text-align: left;
}
#content li {
list-style-type: none;
float: left;
margin: 0 10px 10px 0;
position: realtive;
}
#content img {
width: 150px;
height: 300px;
display: block;
}
#content a .gross {
display: none;
}
#content a:hover .gross{
width: 250px;
height: 300px;
display: block;
position: absolute;
top: -50px;
left: -50px;
z-index: 1;
background: #fff;
}
#content h2 {
font-size: 1.5em;
margin: 0 0 0.5em 0;
}

Dennoch wird mir beim Überfahren mit der Maus, nur ein großes, weißes Kästchen angezeigt. Das vergrößterte Bild ist nicht zu sehen.

Danke für die Hilfe!

 

[prm]

Da ist etliches im Argen:
Eine Tabelle darf nicht innerhalb eines Absatzes p vorkommen.

Das verwendete Listenelement darf nur innerhalb ul vorkommen. ul fehlt bei dir aber vollständig.

Die Klasse .gross, welche für den Vergrößerungseffekt sorgen soll, hat die gleiche Größe wie das Normalbild.

Der IE benötigt auch noch einige Spezialangaben.

Ich würde auf die Tabelle verzichten und mit Listen arbeiten.
Versuch's mal damit, indem du zunächst nur deine Grafiken einsetzt und dann die Grafikabmaße entsprechend änderst: Bildergalerie mit Vergößerungseffekt

 

[Efchen]

Der "Hoover-Effekt" ist der, wenn eine Website plötzlich komplett verschwunden ist, oder?
http://pinkberry-shoppingmania.com/...-900-tempo-widepath-bagged-upright-vacuum.jpg

SCNR,
-Efchen ;-)

 

[neuroleptika]

Mit a:hover .gross sprichst du nur <a> bei :hover an. Das img bleibt dadurch unberührt.
Es hat sich bewährt so etwas mit background-images zu gestalten.