nicht angemeldet
schwebende Bildvorschau
0 
Gunnar Bittersmann
0 0
schwebende Bildvorschau
Der MartinGrüße,
ich habe in einem Textfluss ein kleines Icon und möchte diesem Icon einen Hover-Effekt geben. Das Icon steht nämlich für ein Bild. Wenn ich mit der Maus auf das Icon gehe, soll das Bild in einer gewissen Größe angezeigt werden, ohne den Textfluss zu beeinflussen. Es soll gewissermaßen darüber schweben, ohne dass irgendwas verrutscht. Gehe ich mit der Maus wieder weg, verschwindet diese Bildvorschau. Idealerweise ist das Zentrum des Bildes genau über dem Icon.
Ich bin ziemlich sicher, das kann man mit CSS formulieren, aber ich weiß nicht wie. Bitte helft mir.
Latze
-
@@Latze Bierknecht:
nuqneH
Wenn ich mit der Maus auf das Icon gehe, soll das Bild in einer gewissen Größe angezeigt werden, ohne den Textfluss zu beeinflussen.
Es soll dasselbe Bild größer erscheinen?
transform: scale() (mit Präfixen)
Qapla'
--
„Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry) -
Hi,
Wenn ich mit der Maus auf das Icon gehe, soll das Bild in einer gewissen Größe angezeigt werden, ohne den Textfluss zu beeinflussen. Es soll gewissermaßen darüber schweben, ohne dass irgendwas verrutscht.
position:absolute
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right? -
Das Transform ist es wohl nicht. Es wird eher ein neues größeres Bild erzeugt, das das bestehende einfach nur zentriert überlagert. Das kleine verschwindet dabei nur optisch. Das größere Bild wird direkt in seiner großen Form dargestellt, ohne vorher transformiert zu werden.
Das position: absolute wird wohl notwendig. Nur muss man dabei die Position auch angeben. Diese soll aber abhängig von der kleinen Position sein. In dem Sinne ist sie dann nicht absolut (unabhängig).
Ich fürchte, die absolute Position muss berechnet werden, abhängig von der Position des kleinen Bildes und der Größe (in x- und y-Richtung) des großen.
-
Hi,
Das position: absolute wird wohl notwendig.
sehe ich auch so.
Nur muss man dabei die Position auch angeben. Diese soll aber abhängig von der kleinen Position sein. In dem Sinne ist sie dann nicht absolut (unabhängig).
Richtig, also forsche mal nach, worauf sich die Positionsangaben bei position:absolute beziehen.
Ich fürchte, die absolute Position muss berechnet werden, abhängig von der Position des kleinen Bildes und der Größe (in x- und y-Richtung) des großen.
Nö. Das Icon und das Fullsize-Bild könnten in einem gemeinsamen inline-Containerelement stecken, auf das sich dann auch die Positionsangaben beziehen, wenn ... ;-)
Ciao,
Martin--
Der Alptraum jedes Computers:
"Mir war, als hätte ich gerade eine 2 gesehen."
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Ich habe nun dem Icon dieses CSS gegeben:
img.InputControlFilePreview:hover {
max-height: 100px ;
max-width: 100px ;
position: absolute;
top: -10px;
left: -70px;
border: solid 2px blue;
}und dem darüber liegenden Element position: relative. Es funktioniert nun in Firefox und IE9, aber nicht in Chrome. Letzterer mag das position: absolute nicht.
Gibt es da noch eine Alternativlösung?
-
-