Naou
Neues Mitglied
Guten Abend zusammen
Für ein Projekt in der Schule schlage ich mich momentan mit html und css rum. Ich habe auf meiner Website eine Seite, auf der ich in HTML verkleinerte Bilder platzierte. Mit dem "hover" Befehl sagte ich nun meinem CSS, es soll diese Bilder beim Mouseover Vergrössern. So kann man die Bilder auch in gross betrachten.
Mein Stolperstein momentan liegt darin, dass wenn ich nun mit der Maus über diese aneinandergereihten Bilder fahre, es ein wenig ein durcheinander gibt. Alle anderen Bilder nebenan, die nicht vergrössert werden in diesem Moment, rutschen willkürlich nach rechts oder nach unten. Das hat zur Folge, dass bei einigen der hover sozusagen gar nicht richtig funktioniert, da sie wiederholt nach unten oder oben rutschen. Ich denke das Problem wäre eigentlich gut behoben, würden die Bilder fixiert an ihrem Punkt bleiben, wenn das andere Bild nebenan vergrössert wird. Das wird dann sozusagen über die anderen Bilder angezeigt.
CSS:
HTML:
Kleine Erläuterung zum "Div Bilder", der wurde eingefügt weil es sonst eine Überschneidung gegeben hätte mit anderen Bildern auf der Website.
Nun meine Frage: Wie könnte ich das so machen, dass dieser Content, also die Bilder nebenan fixiert bleiben? Kennt jemand evtl. sogar eine bessere Idee, das Ganze zu lösen? Meine erste Idee war ja eigentlich, dass man aufs Bild klickt um es zu vergrössern. Da wir jedoch kein Java-Script verwenden dürfen, muss ich es nun so irgendwie lösen.
Noch ein Wunsch: Bitte die Antworten wenn sie euch einfallen so schnell wie möglich schreiben, denn ich muss das morgen fertig haben... :)
Herzlichen dank und lg!
Für ein Projekt in der Schule schlage ich mich momentan mit html und css rum. Ich habe auf meiner Website eine Seite, auf der ich in HTML verkleinerte Bilder platzierte. Mit dem "hover" Befehl sagte ich nun meinem CSS, es soll diese Bilder beim Mouseover Vergrössern. So kann man die Bilder auch in gross betrachten.
Mein Stolperstein momentan liegt darin, dass wenn ich nun mit der Maus über diese aneinandergereihten Bilder fahre, es ein wenig ein durcheinander gibt. Alle anderen Bilder nebenan, die nicht vergrössert werden in diesem Moment, rutschen willkürlich nach rechts oder nach unten. Das hat zur Folge, dass bei einigen der hover sozusagen gar nicht richtig funktioniert, da sie wiederholt nach unten oder oben rutschen. Ich denke das Problem wäre eigentlich gut behoben, würden die Bilder fixiert an ihrem Punkt bleiben, wenn das andere Bild nebenan vergrössert wird. Das wird dann sozusagen über die anderen Bilder angezeigt.
CSS:
Code:
#bilder img:hover {
height: 500px;
}HTML:
HTML:
<div id="bilder">
<div id="content">
<h1>Projekte</h1>
<img src="Bilder/Plakat_Slow_Food 3.png" align="left" height="200" alt="Plakat Slowfood"/>
<img src="Bilder/Werbung.jpg" align="left" height="150" alt="Werbung"/>
<img src="Bilder/Original Cover.png" align="left" height="150" alt="Cover"/>
<img src="Bilder/tutl.jpg" align="left" height="150" alt="Cover 2"/>
<img src="Bilder/feld.jpg" align="left" height="150" alt="Landschaftsfoto"/>
<img src="Bilder/zapfen.jpg" align="left" height="150" alt="Tannenzapfen"/>
</div>Kleine Erläuterung zum "Div Bilder", der wurde eingefügt weil es sonst eine Überschneidung gegeben hätte mit anderen Bildern auf der Website.
Nun meine Frage: Wie könnte ich das so machen, dass dieser Content, also die Bilder nebenan fixiert bleiben? Kennt jemand evtl. sogar eine bessere Idee, das Ganze zu lösen? Meine erste Idee war ja eigentlich, dass man aufs Bild klickt um es zu vergrössern. Da wir jedoch kein Java-Script verwenden dürfen, muss ich es nun so irgendwie lösen.
Noch ein Wunsch: Bitte die Antworten wenn sie euch einfallen so schnell wie möglich schreiben, denn ich muss das morgen fertig haben... :)
Herzlichen dank und lg!
