Contao Dozent Marvin Kellermann

|

Polaroid-Effekt für Bilder

Polariod bei Bildern auf der Website erzeugen

Häufig hatte ich das Problem, ein langweiliges Text-Bild-Bild-Text-Gerüst auf meinen Websites zu finden. Ich habe lange nach einer Idee gesucht, mit der ich Abwechslung und ein wenig Spiel in die Präsentation meiner Bilder bekomme. Dieser Polaroid-Effekt, wie ich ihn wegen des dicken weißen Rahmen und des Schattens nenne, ist animiert und rotiert, wenn der User den Cursor auf das Bild legt.

.cc_polaroid_right {
    border: 10px solid white;
    box-shadow: lightgray 5px 5px 10px;
    rotate: 3deg;
    transition: 0.20s;
}

.cc_polaroid_right:hover {
    rotate: -1deg;
    transition: 0.20s;
}

Bilder verschönern mit dem Polaroid-Effekt in Contao

Der Aufbau ist eigentlich ganz simpel: ich lege als erstes den Rahmen und Schatten fest. Die Eingabe rotate 3deg sorgt dafür, dass das Bild um 3 Grad gedreht wird. Die Effekt, wenn die Maus über das Bild fährt soll nicht ruckartig sondern smooth ablaufen, daher erhält er eine transition von 0.2s.

(Beim Befehl Rotate müsst ihr aufpassen, der Safari kann es zum Beispiel nicht in allen Versionen anzeigen.)

Bei der :hover definition wird die Ausrichtung auf -1° geändert. Ebenfalls eine transition von 0.2 für die gleichmäßige Bewegung. Wer genau gelesen hat, wird gemerkt haben, dass die Klasse "cc_polaroid_right" heißt, ich habe das ganze noch mit cc_polaroid_left angelegt, da sind lediglich die Gradzahlen auf -2 und 1 beim Hover geändert.

Zum Schluss noch ein Hinweis: in meinem Fall habe ich die Klasse direkt in dem Bild eingefügt. Bei mir sieht es also so aus: <img class="cc_polaroid_right" src="...">
Wenn du das Bild aber beispielsweise über das Element Bild in Contao 4 einfügst und die Klasse unter "Experteneinstellungen » CSS-Klasse" vergibst, musst du beim Selektor auch .cc_polaroid_right img eintragen, damit die CSS-Eigenschaften auch richtig zugeordnet werden können.

Zurück

Ich beschäftige mich seit Contao 3 mit dem CMS. Auf meinem Blog und auf YouTube findest du einige kostenlose Beiträge und Videos. Gerne unterstütze ich dich bei deinen Projekten, schau gern auf meiner Agentur-Website vorbei.

Du benötigst Unterstützung bei deiner Contao-Instanz?