XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Umblenden mit hover (http://xhtmlforum.de/showthread.php?t=73765)

AndreasB. 07.03.2019 20:31

Umblenden mit hover
 
Hallo,

ein Bild soll im "Normalzustand" kleiner sein und wenn man mit der Maus drüber geht, dann soll es die normale Größe haben. Unter dem Bild kommt weiterer Text.

Nun habe ich das Problem, dass beim hover das "verkleinerte" bild verschwindet und der Text darunter nach oben gerückt wird, da das "verkleinerte" Bild ja nicht mehr da ist.

Der Text, welcher unterhalb kommt, sollte aber so bleiben, wie er ist und das große Bild soll alles andere überlagern (daher das absolute).

Wenn ich es nur relative mache, dann macht das Bild seine 100% nur in seinem Block.
Wie kann ich das machen?

Hier das CSS:
Code:

.imgb {
        max-width: 250px;
        height: auto;
        float: left;
        margin: 5px 10px 5px 0;
        position:relative;
}
.imgb:hover {
        max-width: 100%;
        height: auto;
        display:block;
        border:1px solid #999;
        position:absolute;
}

Viele Grüße
Andreas

Sailor56 07.03.2019 20:35

CSS Transform Zoom bei Mouseover

AndreasB. 07.03.2019 22:35

Hallo Sailor56,

vielen Dank für den Link.
Gibt es das ganze vielleicht auch noch in einer Variante, welche auf allen Browsern funktioniert?

Gruß
Andreas

cloned 08.03.2019 09:12

Diese Variante funktioniert in allen (relevanten) Browsern.
Was zu diesem Beispiel noch gesagt werden muss: Die Präfixe sind einerseits längst nicht mehr alle notwendig und andererseits sollen die Präfixe auch bitte zuerst geschrieben werden. Wird aber ein autoprefixer verwendet dann passiert das sowieso automatisch.
Auch werden hier alle Bilder sofort in der Originalgröße geladen.

AndreasB. 08.03.2019 09:40

Hallo cloned,

ich kenne mich da leider nicht so gut aus.
Kannst du mir erläutern, was du da geschrieben hast?

Gruß
Andreas

cloned 08.03.2019 09:52

Das mit den autoprefixes war mehr als Randnotiz gedacht, es hat ja mit der eigentlichen Frage nichts zu tun.
Aber heutzutage schreibt man keinen reinen CSS Code sondern lässt ihn sich mithilfe von SASS erzeugen. Dadurch lässt es sich viel effizienter arbeiten und die Selektoren auch schlank und effizient halten.
SASS muss aber erst mithilfe eines Tools zu CSS kompiliert werden, dafür wird oft grunt, webpack oder gulp verwendet. Verwendet man bis jetzt nichts davon (weder sass noch build tool) dann ist der Einstieg sehr verwirrend und braucht auch etwas Zeit sowie Umgewöhnung in der Arbeitsweise bis man wirklich effizienteren Code schreiben kann.

Aber hat man so ein build tool erst einmal aufgesetzt so kann es für jedes weitere Projekt einfach übernommen werden. Auch wird zB so ein build tool verwendet um dann automatisch die angesprochenen Präfixe hinzuzufügen.
https://github.com/postcss/autoprefixer <-- Damit schreibst du nur noch die offiziellen, von w3c verlangten Standard CSS Attribute und Werte und übergibst dem Autoprefixer dann lediglich eine Konfiguration wie: Unterstütze alle Browser, die mindestens 4% Marktanteil haben. Oder unterstütze IE ab Version 10 und Firefox ab Version 45. Oder wie auch immer du willst. Und der Autoprefixer generiert dir dann das CSS damit es ab der Version funktioniert.

AndreasB. 08.03.2019 09:55

Ok, danke für die Erläuterung.

AndreasB. 08.03.2019 10:00

Um noch mal auf das Script "CSS Transform Zoom bei Mouseover" zu kommen.
Ich habe es noch nicht getestet, aber aus der Beschreibung geht hervor, dass man bei der Bildgröße die verkleinerte Größe angeben soll und dann den Zoomfaktor.

Das ist ist bei mir so nicht möglich, da die Ursprungsbilder unterschiedlich Groß sind. Daher gebe ich für das kleine Bild eine feste Breite an und lass es dann auf 100% vergrößern.

Wie kann ich das machen?

Gruß
Andreas

AndreasB. 08.03.2019 12:46

Jetzt habe ich es getestet und es ist leider so, wie ich bereits geschrieben habe.
Damit kann ich es leider nicht machen.

Ich habe auch die Suchmaschine bemüht, aber es gibt immer nur diese Lösungen mit dem Zoom-Faktor.

Gibt es hier keine andere Lösung?
Mein Code wäre eigentlich voll ausreichend, wenn der Rest statisch bleiben würde beim Zoom.

Hat jemand noch eine Idee?

Gruß
Andreas

cloned 11.03.2019 09:41

So weit ich das sehe passiert das weil du position: absolute vergibst. Entweder du platzierst ein Platzhalterelement mit den selben Maßen wie dein Bild dorthin wo dein kleines Bild war, zB könntest du dein Bild ja zweimal dort platzieren (Ladezeit ändert sich dadurch ja kaum, da das Bild ja trotzdem nur einmal geladen wird). Ein Bild müsstest du dann ohne alt Tag ausspielen damit es von Screenreadern nicht doppelt vorgelesen wird. Dann legst du beide Bilder übereinander und skalierst nur eines davon.

Oder du verwendest nur ein Bildelement, dann ist deine beste Lösung wirklich das transformieren, wie bereits in der ersten Antwort gezeigt. Das geht aber wirklich nur wenn mit einem Faktor gearbeitet werden kann, sind Bilder mit unterschiedlichen Größen gemischt wird das keine zufriedenstellenden Ergebnisse liefern. Eventuell besteht ja die Möglichkeit die Bilder einheitlich groß auszuspielen, also alle auf eine einheitliche Größe zu bringen.


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:08 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023