CSS: Nach Bildwechsel bei Hover, Drehung mit transform und transition
Frage von Gast | 21.05.2016 um 02:48
Hallo! :) Ich bin soweit gekommen, dass sich ein Bild von mir ändert, wenn man darüber fährt. Das war eine simple Sache. Jedoch möchte ich, dass das neue Bild sich rotiert (also mit transform: rotate) und das in einem weichen Ablauf (also mit transition) Aber eben erst nachdem (!) es schon erschienen ist, da sonst das Bild beim Erscheinen sich in diese Position erst dreht und das ist problematisch, weil mein erscheinendes Bild größer ist, d.h. es streckt sich in die Position. Nur bin ich nicht erfahren genug und weiß auch nicht ob das geht, dass beschriebene war das maximale was ich tun konnte.
Hier noch mein Schnipsel, mit dem Fehler den ich nicht will, damit es besser vorstellbar ist, ich habe jedoch meine bildurl rausgenommen:
CSS
#rotation1 {
background-image: url('bildurl');
height: 112px;
width: 112px;
position: fixed;
top: 300px;
left: 300px;}
#rotation1:hover {
background-image: url('bildurl');
height: 224px;
width: 224px;
transform: rotate(45deg);
z-index:1;
transition: all 0.5s linear;
}
HTML
<div id="rotation1"></p>Kann man irgendwie mit before und after arbeiten? :) Bzw. ist meine Idee überhaupt realisierbar? Kenne mich damit nur nicht genug aus, deshalb verzweifle ich hier gerade ein bisschen :/
Danke für jede Hilfe!
Ähnliche Themen
CSS-Stylesheets in HTML einbinden
Tutorial | 0 Kommentare
Website Performance: Javascript und CSS komprimiert ausliefern und Ladezeiten verkürzen
Tutorial | 0 Kommentare
Mouseover Buttons mit CSS ohne Nachladen
Tutorial | 0 Kommentare
jQuery: CSS Stylesheet Switcher
Tutorial | 1 Kommentar
CSS: :hover für :before und :after
Frage | 3 Antworten
CSS: Hover Effekt nur bei gefüllten Tabellenzellen
Frage | 1 Antwort
Bilder, CSS, JS und Seiten neu laden trotz Browser-Cache
Tipp | 2 Kommentare
Wichtiger Hinweis
Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.
Jetzt mitmachen
Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.
So ganz verstehe ich nicht, was du erreichen willst.
Ist das Problem dass das Bild noch nicht komplett geladen ist und dann aber schon anfängt sich zu drehen?
Mit :before und :after kannst du vermutlich nicht arbeiten, damit fügst du einen Inhalt vor oder hinter einem Element ein, ich denke nicht dass du das suchst.
Die Bild-URL ist aber bei beiden Bildern verschieden, oder?
Wäre es denn eine Idee, die Bilder einfach gleich groß zu machen/ zu stretchen, wenn der Größenunterschied zum Problem wird?
21.05.2016 um 03:32
Danke für die Antwort! Also ich habe mein kleines Bild, wenn ich drüber fahre taucht ein größeres auf und ich möchte gerne, dass sich das größere dreht, aber nicht von klein nach groß beim Auftauchen (das passiert nämlich beim oben angegebenen Ausschnitt), sondern in seiner eigenen Größe. Also im Prinzip: hovern-> großes Bild erscheint ohne Effekt->großes Bild dreht sich erst nach dem es erschienen ist und nicht beim Erscheinen selbst da es sich sonst von klein nach groß streckt.
Vielleicht hab ich aber auch eine unmögliche Idee :/
Ja, die Bild-Url wäre verschieden, und den Größenunterschied kann ich leider nicht ändern..der muss so leider so bleiben. Mir fällt leider nichts ein..falls es nicht möglich ist muss ich wohl damit leben :)
21.05.2016 um 12:41
Es gibt einen CSS-Wert transition-delay, zum Beispiel "transition-delay: 2s" oder statt s gehen auch ms.
Vielleicht kann dir das helfen wenn die transition erst nach einer gewissen Zeit beginnt.
21.05.2016 um 14:00
Hi! Danke! Das hab ich jetzt probiert, aber es verzögert nur den Ablauf um einige Sekunden, es geschieht also dasselbe nur einige Sekunden später :/
21.05.2016 um 15:28
So ganz habe ich glaube ich auch nicht verstanden was du erreichen willst.
Aber wenn die Größe ein Problem ist, das eine Bild aber zwingend größer sein muss als das andere, wäre es vielleicht eine Idee den Kasten für das Bild konstant groß zu halten und das kleinere Bild darin zum Beispiel zu zentrieren.
Ansonsten verstehe ich nicht so ganz genau was du mit "nachdem es erschienen ist" meinst. Meinst du damit die Zeit bis es geladen wurde?
Du könntest dir vielleicht auch noch animation und animation-delay ansehen. Vielleicht hilft dir das weiter.
22.05.2016 um 23:25