CSS translate mit Zielposition?

[treziman]

Hallo allerseits, mein letzter Beitrag ist schon länger her. Falls ich jetzt einen Fehler mache, bitte ich um Entschuldigung.

Meine Frage: Auf einer Webseite befinden sich 8 Bilder. Ich möchte nun jedes Bild, unabhängig von dessen Ausgangsposition, an ein und dieselbe Zielposition bei :hover bewegen. Gelöst habe ich es schon mit CSS -> translate, indem ich jedem Bild eine eigene Klasse gegeben habe mit unterschiedlichen Werten in translate(). Aber irgendwie ist mir das nicht elegant genug. Gibt es nicht die Möglichkeit einer festen Zielangabe bei translate? So in der Art z.B. translate( bewege zu 200,200), egal wo sich das Bild in der Ausgangsposition befindet.

Danke schonmal.

[Tabellenkalk]

Hallo,

Abgesehen davon, dass :hover nicht überall taugt, könnte es helfen die Bilder absolute zu positionieren?

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

Abgesehen davon, dass :hover nicht überall taugt, könnte es helfen die Bilder absolute zu positionieren?

Aus Performancegründen sollte man möglichst transform() animieren, nicht top, left etc.

LLAP 🖖

[treziman]

Dankeschön schonmal euch beiden. Offenbar geht das wieder nicht, wie ichs mir vorgestellt habe. Wäre auch zu einfach. Ich hatte schon angenommen etwas übersehen zu haben beim Studieren von transform und translate. Gut ich habs halt mit Klassen gemacht. Mit Jquery gehts übrigens auch. Ist mir aber auch irgendwie zuviel, bei 8 Bildern. Okay, danke nochmal und bis bald.

[djr]

Ideal wäre Grid. Aber Animation ist da kaum möglich - vergleiche https://codepen.io/matuzo/post/animating-css-grid-layout-properties

[Gunnar Bittersmann]

@@treziman

Meine Frage: Auf einer Webseite befinden sich 8 Bilder. Ich möchte nun jedes Bild, unabhängig von dessen Ausgangsposition, an ein und dieselbe Zielposition bei :hover bewegen.

Wie soll das gehen? Der Nutzer fährt mit der Maus über das Bild, das Bild fängt an sich zu bewegen, verlässt die Mausposition, :hover greift nicht mehr, das Bild bewegt sich also zurück zur Anfangsposition, erreicht wieder die Mausposition, :hover greift wieder … Das Bild ruckelt hin und her, ohne die Endposition zu erreichen.

Gelöst habe ich es schon mit CSS -> translate, indem ich jedem Bild eine eigene Klasse gegeben habe

IDs wären dafür angebracht gewesen.

LLAP 🖖

[treziman]

Doch, klappt. Bei :hover werden die Bilder entsprechend vergrössert (scale), dabei aber nicht soweit nach rechts verschoben, dass sie die Maus verlassen. Skizze:

Bild1 Bild2

Bild3 Bild4 Bild5

Bild6 Bild7 Bild8

Bild4 ist quasi der Mittelpunkt der vergrösserten Bilder. Mit IDs wäre es natürlich auch gegangen.

[Gunnar Bittersmann]

@@treziman

Doch, klappt. Bei :hover werden die Bilder entsprechend vergrössert (scale), dabei aber nicht soweit nach rechts verschoben, dass sie die Maus verlassen.

So in der Art? ☞ Codepen

Mit IDs wäre es natürlich auch gegangen.

Wie du siehst, geht’s auch ohne – weder Klasse noch ID.

Beachte auch, dass derselbe Effekt, der bei Mausbenutzung (:hover) wirkt, auch bei Tastaturbenutzung (:focus) wirkt.

LLAP 🖖

[Rolf B]

Hallo Gunnar,

sehr schöne Idee, mittels Custom Properties eine einheitliche Behandlung der Transformation zu erreichen.

Aber an deinem Pen sieht man sehr schön das Problem dieses UI-Konzepts: Man darf nichts in der Mitte haben. Das wird überdeckt, sobald die Maus ein Randelement erreicht.

Rolf

[Gunnar Bittersmann]

@@Rolf B

sehr schöne Idee, mittels Custom Properties eine einheitliche Behandlung der Transformation zu erreichen.

Nicht wahr?

Geht aber auch ohne; ist dann halt mehr Schreibarbeit.

Aber an deinem Pen sieht man sehr schön das Problem dieses UI-Konzepts: Man darf nichts in der Mitte haben. Das wird überdeckt, sobald die Maus ein Randelement erreicht.

Ich hatte zuerst die Sonne in der Mitte. Das war dann nichts mit „Brüder, zur Sonne, zur Freiheit“. Und so hab ich mich auf die Planeten beschränkt.

LLAP 🖖

[treziman]

Hallo Gunnar,

super Lösung! Im Prinzip aber machst Du nichts anderes als das, was ich gemacht habe, nämlich jedes Element einzeln ansprechen (bei Dir mittels nth-child()). Da habe ich ja nach einer Möglichkeit gesucht, genau dies zu vereinfachen. Vielleicht wird das ja mal bei CSS4 oder höher implementiert, dass man einer Klasse (ID geht hier ja nicht), die translate() beinhaltet, sagen kann: bewege Elemente mit dieser Klasse zur Position x=200,y=300 - egal wo dein Ursprung liegt.

Thorsten

[Gunnar Bittersmann]

@@treziman

super Lösung!

Gerade noch was ergänzt: Die Vergrößerung soll nur gemacht werden, wenn der Browser Grid und custom properties unterstützt. Also in einen @supports (display: grid) and (--row: top)-Block eingeschlossen.

die translate() beinhaltet

Wenn du vergrößerst, wozu brauchst du translate?

sagen kann: bewege Elemente mit dieser Klasse zur Position x=200,y=300 - egal wo dein Ursprung liegt.

Wie Kalk schon sagte, könnte man das mit absoluter Positionierung machen. Wie ich schon sagte, sollte man das nicht machen.

Außerdem: Wie vereinbart sich ein in Pixel gemeißelter Endpunkt mit responsive design?

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

super Lösung!

Gerade noch was ergänzt: Die Vergrößerung soll nur gemacht werden, wenn der Browser Grid und custom properties unterstützt.

Andere Lösung ohne Grid und custom properties: mit Floats.

Im Prinzip aber machst Du nichts anderes als das, was ich gemacht habe, nämlich jedes Element einzeln ansprechen (bei Dir mittels nth-child()).

Was dem geschuldet ist, dass die Mitte frei ist. Ansonsten könnte man mit `:nth-child(an + b) auch Regeln für Zeilen und Spalten erstellen.

LLAP 🖖

[Rolf B]

Hallo Gunnar,

Ansonsten könnte man mit `:nth-child(an + b) auch Regeln für Zeilen und Spalten erstellen.

Bei Spalten ist das einfach. Wenn ich 3 Spalten habe, erreiche ich mit 3n+1, 3n+2 und 3n+3 die 1., 2. und 3. Spalte.

Aber Zeilen? Das wird zumindest mal lästig, weil man das mit einem Selektor pro Spalte realisieren müsste, bei 5 Zeilen und 3 Spalten z.B. mit

img:nth-child(15n+1), img:nth-child(15n+2), img:nth-child(15n+3) {
   eigenschaft:wert;
   ...
}

Oder geht das einfacher? Oder - gibt es in einem Grid die Möglichkeit, die Elemente einer bestimmten Zeile zu matchen?

Rolf