Bildansicht - nicht ganz so leicht (Hover-Effekt)

[LuvShining]

Hallo,

ich möchte die Großansicht eines Bildes ein wenig nett gestalten. Zu diesem Zweck habe ich mir ein Hintergrundbild angelegt. Ausgerichtet an dieses Hintergrundbild habe ich die Großansicht des Bildes, dass darüber angezeigt werden soll.

Mein CSS

a.img {float: left; 
padding-top: 10px;
padding-left:10px;
padding-bottom: 15px;
padding-left: 54px;
border:1px solid #ECECEC;}
a.img:hover {cursor:hand;}
a.img span {visibility:hidden;}
a.img:hover span {visibility:visible; 
background-image: url(-PFAD -);
background-position: no-repeat;}

HTML

<a class="img" href="#"><img src="hund.jpg" alt="Der Hund">
<span><img src="images/bilder/hund_gr.jpg" border="0" alt="Der Hund in Großansicht">
<p>Schönes Bild, der Hund in Großansicht</p>

Wie ich es mir vorstelle habe ich mal als Bildansicht beigelegt. Der Hund in Thumnail-Ansicht ist die eigentliche Ansicht. Drumherum dann ein bisserl Text. Rechts daneben dann die Ansicht, wie es mit dem Überfahren mit der Maus aussehen sollte.

Aber es klappt nicht. Das Thumnail des Hundes ist plötzlich am linken Rand- als wenn die Großansicht schon hinterlegt, aber der :hover noch nicht durchgeführt worden ist.

Hat jemand eine Idee?

Würd mich freuen.

Liebe Grüße
Nadine

 

[Maik]

Hi,

grundsätzlich fehlt da im HTML-Code das schliessende </a>- und </span>-Tag.

Zudem dürfen Inline-Elemente keine Block-Elemente enthalten, sofern das p-Element darin eingebettet ist.

 

[LuvShining]

Hallo,

ich hatte es vergessen rüberzukopieren, aber es steht im HTML auch so drin:

<a class="img" href="#"><img src="images/hund.jpg" alt="Der Hund">
<span><img src="images/bilder/hund_gr.jpg" border="0" alt="Der Hund in Großansicht">
<p>Schönes Bild, der Hund in Großansicht</p></a></span

Trotzdem funktioniert es nicht. Auch wenn ich den Bereich "P" völlig entferne klappt es nicht.... :-(

Eine andere Idee?

 

[Maik]

Nun stimmt aber die Reihenfolge der beiden genannten Tags nicht, und beim </span> fehlt die schliessende >-Klammer.

Ansonsten kann ich deiner Problemschilderung nicht ganz folgen, denn das Thumbnail sitzt bei mir nicht am linken Rand, und auch nicht plötzlich, sondern hält den deklarierten linken Innenabstand von 54 Pixel des Links ein. Oder soll er nur 10 Pixel betragen, wie in der erstgenannten padding-left-Deklaration festgelegt?

 

[LuvShining]

Ich kann es drehen und wenden wie ich möchte - es möchte nicht wie ich. Was steht verkehrt herum? Mein HTML-Tag?

<a class="img" href="#"><img src="http://www.tutorials.de/forum/images/hund.jpg">
<span><img src="http://www.tutorials.de/forum/images/bilder/hund_gr.jpg"></span></a>

CSS

a.img {float: left; 
border:1px solid #ECECEC;}
a.img:hover {cursor:hand;}
a.img span {visibility:hidden;}
a.img:hover span {visibility:visible; 
width:250px;
height:259px;
padding-top: 5px;
padding-left: 5px;
padding-bottom: 5px;
padding-left: 36px;
background-image: url(-PFAD-/bg_img.jpg);
background-repeat: no-repeat;
background-position: top left;}

p.img {font-size:87%; 
color:#000; 
text-align:center;}

Und meine Ansicht ist nun die folgende:
- Bild1, bevor man mit der Maus darüber geht. Der große, graue Rahmen ist schon vollständig zu sehen. Der Text neben dem Bild rutscht auch schon die angegebene Größe für den Hover nach links.
Das Bild an sich ist unten links in der Ecke

- Bild2, wenn ich mit der Maus darüber gehe, ist der Hintergrund hellrot. Ich gehe davon aus, dass er sich hier die Angaben des a: nimmt an stelle der angegebenen Klasse

Die sieht so aus:

a {color: #D30000; text-decoration:none;}
a:hover {color: #000; background-color: #FFBBBB; text-decoration:underline;}
a:focus {color: #000; background-color: #FFBBBB; text-decoration:underline;}

Ich kann den Fehler oder Trick einfach nicht erkennen. :-(

 

[Maik]

Ich würde mal den Wert no-repeat der dazugehörigen Eigenschaft background-repeat zuordnen und ggfs. für background-position einen Wert setzen.

Und die unerwünschte Hintergrundfrabe kannst du hier abstellen:

a.img:hover {cursor:hand;background:none;}

Den von dir gezeigten Schnappschuss mit der verschobenen Grafik kann ich bei mir leider nicht reproduzieren.

Möglicherweise spielt sich das Szenario bei dir in einem übergeordneten Element ab, dessen Breite nicht ausreicht.

 

[LuvShining]

Hallo,
das hatte ich gerad bearbeitet, als Du wohl geantwortet hast. Der Wert, den ich gesetzt habe ist "top left" und 'position' wurde korrigiert. Den Fehler hatte ich erst nach dem absenden gesehen. Danke für den anderen Tipp... Das werde ich gleich mal machen.

Kurzum, eigentlich müsste die von mir gemachte Ansicht aussehen, wie mein Bildanhang jetzt? Warum aber tut er es dann bei mir nicht :-( Hier ist s verschoben... weia... schwer, schwer, schwer....

 

[Maik]

Kannst du einen Link zur Seite nennen, damit man da einen Blick drauf werfen kann?

Achja, bei der Hintergrundpostionierung wird zunächst die horizontale und anschliessend die vertikale Position genannt.

 

[LuvShining]

Es liegt auf cherrysworld.de/test

....... peinlich, peinlich.... :-(

 

[Maik]

Falls es dir darum geht, dass das "Thumbnail" hund_kl.jpg im Bezug zum umfliessenden Text oben ausgerichtet sein soll, setz folgende Regel ein:

a.img img {
vertical-align:top;
}

Falls du erzielen möchtest, dass der umfliessende Text zunächst direkt neben dem "Thumbnail" sitzt, tausche die visibility-Eigenschaft zum Aus- und Einblenden des span-Elements gegen die display-Eigenschaft, da mit display:none im Vergleich zu visibility:hidden kein Platzhalter für das Element freigelassen wird:

a.img span {
display:none;
}
a.img:hover span {
display:inline;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 36px;
background-image:  url(/images/bg_img.jpg);
background-repeat: no-repeat;
background-position: left top;
}