container soll sich der Größe des Images anpassen

[Gunnar Bittersmann]

@@Hannes Weninger

ich hab mal dieses JSFiddle Beispiel gemacht: JSFiddle.

Zum Markup:

<div class="container">
			
			<section class="main">

class="main"?? Zur Auszeichnung des Hauptinhalts dient das main-Element. [Spec]

Ein div-Container außenrum sollte nicht erforderlich sein, da es mit html und body bereits zwei solche gibt.

						<div class="ch-item ch-img-1">
							<div class="ch-info">
								<h3>Use what you have</h3>

Wofür sollen die div-Elemente gut sein, die gar nichts gruppieren?

Es sieht auch nicht so aus als wäre „Use what you have“ eine Überschrift.

Zum Stylesheet:

				-webkit-transition: all 0.4s ease-in-out;
				-moz-transition: all 0.4s ease-in-out;
				-o-transition: all 0.4s ease-in-out;
				-ms-transition: all 0.4s ease-in-out;
				transition: all 0.4s ease-in-out;

Die Vendor-Präfixe -moz-, -ms- und -o- sind unsinng. (Die letzten beiden waren es wohl schon immer.) Alle diese Browser unterstützen transition präfixfrei. Lediglich -webkit- könnte für alte Android-Browser noch sinnvoll sein.

Warum all, wenn nur die Änderung von transform animiert werden soll?

Die Animation der Änderung von box-shadow ist aus Performanz-Sicht nicht so eine gute Idee.

				-webkit-transform: scale(0);
				-moz-transform: scale(0);
				-o-transform: scale(0);
				-ms-transform: scale(0);
				transform: scale(0);

Ähnlich hier: -moz- und -o- sind unsinng.

				-webkit-backface-visibility: hidden;

Die präfixfreie Angabe der backface-visibility-Eigenschaft fehlt.

LLAP 🖖