Problem mit
bearbeitet von Matthias ScharwiesServus!
> Also muss ich das machen:
>
> ...
Die Live-Beispiele im SELF-Wiki sind hauptsächlich Beispiele, die zeigen wie man etwas machen **könnte**.
~~~CSS
button:focus img,
button:hover img {
...
}
~~~
Schau Dir einfach mal an was der Unterschied zum „Normalzustand“ ist:
* `border: 2em solid #eee;` Das Bild erhält einen 2em breiten, hellgrauen Rand
* `border-radius: 1em;`der abgerundet wird
* `box-shadow: 1px 1px 5px #333;`nen Schatten drum rum
* `width: 300%; `vorher war's 10em → jetzt mal 3
* `left: -4%;`
* `top: -4%;` ein bisschen nach links und oben gezogen. (Dort ist die Mauer, sonst würden die Bilder zu weit nach rechts ragen, was beim letzten Bild der Reihe tödlich wäre -> es würde über den rechten Rand ragen.)
* `z-index: 5;`Das gehoverte Bild liegt **über** den anderen.
Versuch mal weg vom ersten Schritt des ***"Copy 'n Paste"*** hin zum ***"Trial and Error"*** zu kommen. Probier eine Eigenschaft oder andere Werte aus und beobachte was passiert. Du kannst die ja immer funktionierende Verisonen unter anderen Namen speichern, sodass nix kaputt geht!
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“
Problem mit
bearbeitet von Matthias ScharwiesServus!
> Also muss ich das machen:
>
> ...
Die Live-Beispiele im SELF-Wiki sind hauptsächlich Beispiele, die zeigen wie man etwas machen **könnte**.
~~~CSS
button:focus img,
button:hover img {
...
}
~~~
Schau Dir einfach mal an was der Unterschied zum „Normalzustand“ ist:
* `border: 2em solid #eee;` Das Bild erhält einen 2em breiten, hellgrauen Rand
* `border-radius: 1em;`der abgerundet wird
* `box-shadow: 1px 1px 5px #333;`nen Schatten drum rum
* `width: 300%; `vorher war's 10em → jetzt mal 3
* `left: -4%;`
* `top: -4%;` ein bisschen nach links und oben gezogen. (Dort ist die Mauer, sonst würden die Bilder zu weit nach rechts ragen, was beim letzten Bild der reihe tödlich wäre -> es würde über den rechten Rand ragen.
* `z-index: 5;`Das gehoverte Bild liegt **über** den anderen.
Versuch mal weg vom ersten Schritt des ***"Copy 'n Paste"*** hin zum ***"Trial and Error"*** zu kommen. Probier eine Eigenschaft oder andere Werte aus und beobachte was passiert. Du kannst die ja immer funktionierende Verisonen unter anderen Namen speichern, sodass nix kaputt geht!
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“