zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Umblenden mit hover

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.03.2019, 20:31
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2009
Beiträge: 44
AndreasB. befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.03.2019, 20:35
Benutzer
neuer user
 
Registriert seit: 10.07.2018
Beiträge: 86
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

CSS Transform Zoom bei Mouseover
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.03.2019, 22:35
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2009
Beiträge: 44
AndreasB. befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 08.03.2019, 09:12
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.943
cloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblick
Standard

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.
__________________
Zitat: "offenbar" bedeutet, dass ich nicht sicher bin, wie Du etwas meinst - Ein User hier auf diesem Forum 😂

Geändert von cloned (08.03.2019 um 09:15 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 08.03.2019, 09:40
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2009
Beiträge: 44
AndreasB. befindet sich auf einem aufstrebenden Ast
Standard

Hallo cloned,

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

Gruß
Andreas
Mit Zitat antworten
  #6 (permalink)  
Alt 08.03.2019, 09:52
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.943
cloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblick
Standard

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.
__________________
Zitat: "offenbar" bedeutet, dass ich nicht sicher bin, wie Du etwas meinst - Ein User hier auf diesem Forum 😂
Mit Zitat antworten
  #7 (permalink)  
Alt 08.03.2019, 09:55
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2009
Beiträge: 44
AndreasB. befindet sich auf einem aufstrebenden Ast
Standard

Ok, danke für die Erläuterung.
Mit Zitat antworten
  #8 (permalink)  
Alt 08.03.2019, 10:00
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2009
Beiträge: 44
AndreasB. befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #9 (permalink)  
Alt 08.03.2019, 12:46
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2009
Beiträge: 44
AndreasB. befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 11.03.2019, 09:41
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.943
cloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblick
Standard

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.
__________________
Zitat: "offenbar" bedeutet, dass ich nicht sicher bin, wie Du etwas meinst - Ein User hier auf diesem Forum 😂
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Hilfe css Menu center xXcyberXx CSS 5 28.11.2010 20:51
Problem mit CSS Menü SMundt CSS 9 07.01.2009 20:12
CSS Navigation - Problem mit IE6 pcklinik CSS 4 18.09.2007 13:04
Darstellungsproblem CSS Navigation im IE7 pcklinik CSS 7 09.09.2007 18:25
CSS Einsteiger bittet um Hilfe pcklinik CSS 0 06.09.2007 15:40


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:21 Uhr.