Hej Yadgar, > Konnte das Problem inzwischen lösen Nein, denn Deine Seite enthält gar kein Bild. Bilder von inhaltlicher Relevanz gehören ins HTML (und nicht ins CSS) - ob das zweite Bild zum Verständnis nötig ist, kann man diskutieren. Ich würde zu einem ja tendieren und es ebenfalls ins HTML setzen. Beide Bilder sind sinnvoll zu bechriften, so dass auch Menschen ohne CSS verstehen, was das soll. Die einfachste Methode mal das eine, mal das andere Bild anzeigenzu lassen, wäre IMHO das umbrechen mittels `whitespace: nowrap;` zu verbieten. Beim Überfahren mit der Maus oder antabben (Tastatur-Nutzer nciht ausschließen!) macht das erste Bild dem zweiten dann Platz: ~~~html <a href="#"> <img src="bild1.jpg" width="800" height="600" class="defaultPic" alt="Erstes Bild"> <img src="bild2.jpg" width="800" height="600" class="altPic" alt="Zweites Bild"> </a> <!-- Hier wäre Platz für eine prima Beschriftung --> ~~~ ~~~CSS a { display: block; width: 40vw; height: 30vw; /* Nur nötig, wenn animiert werden soll/darf, Breite und Höhe müssen dem Bildformat entsprechen (hier 4:3) */ white-space-nowrap; /* Damit die Bilder nebeneinander bleiben */ } a img { transition: width 0.9s ease-in-out; /* Falls es animiert sein soll/darf */ } a img.defaultPic { width: 100%; /* füllt das Elternelement komplett aus */ } a img.altPic { width: 0%; /* Ist zunächst nicht sichtbar */ } a:focus img.defaultPic, a:hover img.defaultPic { width: 0%; /* Wird beim hovern/antabben unsichtbar */ } a:focus img.altPic, a:hover img.altPic { width: 100%; /* Füllt beim hovern/antabben das Elternelement aus */ } ~~~ Das Beispiel als [Codepen: "Bilderwechsel"](http://codepen.io/haunschild/pen/YpyZxX?editors=1100#0) Ein Problem bleibt: wie soll der Nutzer wissen, dass etwas passiert beim Überfahren mit der Maus? Hinweis geben! Entweder im Text oder grafisch, am besten natürlich beides und für alle erreichbar! Marc PS: Natürlich lassen sich auch andere Eigenschaften (opacity, height usw) animieren - es muss kein Einschieben von rechts sein... PPS: Wenn jemand das Beispiel im Wiki verwenden möchte: gerne!

Hej Yadgar, > Konnte das Problem inzwischen lösen Nein, denn Deine Seite enthält gar kein Bild. Bilder von inhaltlicher Relevanz gehören ins HTML (und nicht ins CSS) - ob das zweite Bild zum Verständnis nötig ist, kann man diskutieren. Ich würde zu einem ja tendieren und es ebenfalls ins HTML setzen. Beide Bilder sind sinnvoll zu bechriften, so dass auch Menschen ohne CSS verstehen, was das soll. Die einfachste Methode mal das eine, mal das andere Bild anzeigenzu lassen, wäre IMHO das umbrechen mittels `whitespace: nowrap;` zu verbieten. Beim Überfahren mit der Maus oder antabben (Tastatur-Nutzer nciht ausschließen!) macht das erste Bild dem zweiten dann Platz: ~~~html <a href="#"> <img src="bild1.jpg" width="800" height="600" class="defaultPic" alt="Erstes Bild"> <img src="bild2.jpg" width="800" height="600" class="altPic" alt="Zweites Bild"> </a> <!-- Hier wäre Platz für eine prima Beschriftung --> ~~~ ~~~CSS a { display: block; width: 40vw; height: 30vw; /* Nur nötig, wenn animiert werden soll/darf, Breite und Höhe müssen dem Bildformat entsprechen (hier 4:3) */ white-space-nowrap; /* Damit die Bilder nebeneinander bleiben */ } a img { transition: width 0.9s ease-in-out; /* Falls es animiert sein soll/darf */ } a img.defaultPic { width: 100%; /* füllt das Elternelement komplett aus */ } a img.altPic { width: 0%; /* Ist zunächst nicht sichtbar */ } a:focus img.defaultPic, a:hover img.defaultPic { width: 0%; /* Wird beim hovern/antabben unsichtbar */ } a:focus img.altPic, a:hover img.altPic { width: 100%; /* Füllt beim hovern/antabben das Elternelement aus */ } ~~~ Das Beispiel als [Codepen: "Bilderwechsel"](http://codepen.io/haunschild/pen/YpyZxX?editors=1100#0) Marc PS: Natürlich lassen sich auch andere Eigenschaften (opacity, height usw) animieren - es muss kein Einschieben von rechts sein... PPS: Wenn jemand das Beispiel im Wiki verwenden möchte: gerne!

Hej Yadgar, > Konnte das Problem inzwischen lösen Nein, denn Deine Seite enthält gar kein Bild. Bilder von inhaltlicher Relevanz gehören ins HTML (und nicht ins CSS) - ob das zweite Bild zum Verständnis nötig ist, kann man diskutieren. Ich würde zu einem ja tendieren und es ebenfalls ins HTML setzen. Beide Bilder sind sinnvoll zu bechriften, so dass auch Menschen ohne CSS verstehen, was das soll. Die einfachste Methode mal das eine, mal das andere Bild anzeigenzu lassen, wäre IMHO das umbrechen mittels `whitespace: nowrap;` zu verbieten. Beim Überfahren mit der Maus oder antabben (Tastatur-Nutzer nciht ausschließen!) macht das erste Bild dem zweiten dann Platz: ~~~html <a href="#"> <img src="bild1.jpg" width="800" height="600" class="defaultPic" alt="Erstes Bild"> <img src="bild2.jpg" width="800" height="600" class="altPic" alt="Zweites Bild"> </a> <!-- Hier wäre Platz für eine prima Beschriftung --> ~~~ ~~~CSS a { display: block; width: 40vw; height: 30vw; /* Nur nötig, wenn animiert werden soll/darf, Breite und Höhe müssen dem Bildformat entsprechen (hier 4:3) */ } a img { transition: width 0.9s ease-in-out; /* Falls es animiert sein soll/darf */ } a img.defaultPic { width: 100%; /* füllt das Elternelement komplett aus */ } a img.altPic { width: 0%; /* Ist zunächst nicht sichtbar */ } a:focus img.defaultPic, a:hover img.defaultPic { width: 0%; /* Wird beim hovern/antabben unsichtbar */ } a:focus img.altPic, a:hover img.altPic { width: 100%; /* Füllt beim hovern/antabben das Elternelement aus */ } ~~~ Das Beispiel als [Codepen: "Bilderwechsel"](http://codepen.io/haunschild/pen/YpyZxX?editors=1100#0) Marc PS: Natürlich lassen sich auch andere Eigenschaften (opacity, height usw) animieren - es muss kein Einschieben von rechts sein... PPS: Wenn jemand das Beispiel im Wiki verwenden möchte: gerne!

Hej Yadgar, > Konnte das Problem inzwischen lösen Nein, denn Deine Seite enthält gar kein Bild. Bilder von inhaltlicher Relevanz gehören ins HTML (und nicht ins CSS) - ob das zweite Bild zum Verständnis nötig ist, kann man diskutieren. Ich würde zu einem ja tendieren und es ebenfalls ins HTML setzen. Beide Bilder sind sinnvoll zu bechriften, so dass auch Menschen ohne CSS verstehen, was das soll. Die einfachste Methode mal das eine, mal das andere Bild anzeigenzu lassen, wäre IMHO das umbrechen mittels `whitespace: nowrap;` zu verbieten. Beim Überfahren mit der Maus oder antabben (Tastatur-Nutzer nciht ausschließen!) macht das erste Bild dem zweiten dann Platz: ~~~html <a href="#"> <img src="bild1.jpg" width="800" height="600" class="defaultPic" alt="Erstes Bild"> <img src="bild2.jpg" width="800" height="600" class="altPic" alt="Zweites Bild"> </a> ~~~ ~~~CSS a { display: block; width: 40vw; height: 30vw; /* Nur nötig, wenn animiert werden soll/darf, Breite und Höhe müssen dem Bildformat entsprechen (hier 4:3) */ } a img { transition: width 0.9s ease-in-out; /* Falls es animiert sein soll/darf */ } a img.defaultPic { width: 100%; /* füllt das Elternelement komplett aus */ } a img.altPic { width: 0%; /* Ist zunächst nicht sichtbar */ } a:focus img.defaultPic, a:hover img.defaultPic { width: 0%; /* Wird beim hovern/antabben unsichtbar */ } a:focus img.altPic, a:hover img.altPic { width: 100%; /* Füllt beim hovern/antabben das Elternelement aus */ } ~~~ Das Beispiel als [Codepen: "Bilderwechsel"](http://codepen.io/haunschild/pen/YpyZxX?editors=1100#0) Marc PS: Natürlich lassen sich auch andere Eigenschaften (opacity, height usw) animieren - es muss kein Einschieben von rechts sein... PPS: Wenn jemand das Beispiel im Wiki verwenden möchte: gerne!