Trick # 217 | Dieser Beitrag beinhaltet 1349 Wörter. – Geschätzte Lesezeit: ca. 7 Minuten.
Heute bauen wir einen echten Hingucker: So genannte Flip-Cards, die sich umdrehen, sobald der Mauszeiger darüber bewegt wird. Das gibt ein ebenso cooles wie professionelles Look & Feel für Ihre Website.
Diese Beispiele drehen die Flip-Cards horizontal. Auch vertikal ist möglich:
Die beiden Varianten wurden mit CSS-Stylings erstellt. Den vollständigen Code finden Sie nachfolgend. Kopieren Sie ihn in das CSS-Stylesheet Ihrer Website – falls in WordPress: unter Design/Customizer/Zusätzliches CSS:
/* Dies ist der Flip-Card-Container. */
.flip-card-horizontal, .flip-card-vertical {
width: 400px;
height: 284px;
background-color: transparent;
perspective: 1000px; /* Diese Zeile entfernen, wenn Sie keinen 3D-Effekt wünschen. */
}
/* In diesem Container werden die Flip-Cards (Front- und Rückseite) platziert. */
.flip-card-inner {
box-shadow: 10px 20px 15px silver;
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
/* Hier wird der Flip definiert. Die Drehung erfolgt HORIZONTAL. */
.flip-card-horizontal:hover .flip-card-inner {
transform: rotateY(180deg);
}
/* Eine weitere Definition für den Flip, wenn die Drehung VERTIKAL geschehen soll. */
.flip-card-vertical:hover .flip-card-inner {
transform: rotateX(180deg);
}
/* Dieser Container definiert die Vorder- und Rückseite der Flip-Cards. */
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
/* Wenn Sie kein Bild für die Vorderseite der Flip-Card verwenden, können Sie hier CSS-Angaben einfügen. */
.flip-card-front {
/* Hier allfälligen CSS-Code platzieren */
}
/* Der folgende Code definiert die Ansicht der Flip-Card-Rückseite. */
.flip-card-back {
padding: 20px 10px;
background-color: #59b14b33;
}
/* Hier definieren Sie die Rückseite der Flip-Card für die HORIZONTALE Drehung. */
.flip-card-horizontal .flip-card-back {
transform: rotateY(180deg);
}
/* Hier definieren Sie die Rückseite der Flip-Card für die VERTIKALE Drehung. */
.flip-card-vertical .flip-card-back {
transform: rotateX(180deg);
}
/* Der Button auf der Rückseite wird mit folgenden Zeilen definiert. */
.flip-button {
cursor: pointer;
background-color: #293280;
color: #ffffff;
padding: 10px 20px;
font-size: 22px;
border-radius: 10px;
border: 0px;
}Die einzelnen Abschnitte des CSS-Codes sind in den Kommentaren beschrieben. Natürlich lassen sich Farben und andere Einstellungen nach Gusto anpassen. Eventuell kann es sinnvoll sein, die Grösse der Flip-Cards (auf Zeilen 3 und 4) mit einer Media-Query für Desktop- bzw. Mobilanzeigen anzupassen.
Nun benötigen Sie noch HTML-Code, welcher die Inhalte der Flip-Cards definiert. Dieser folgt hier:
<!-- Flip-Card für HORIZONTALE Drehung -->
<div class="flip-card-horizontal">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="URL_ZU_IHRER_BILDDATEI" />
</div>
<div class="flip-card-back">
<h3>Titel</h3>
<p>Beschreibung</p>
<a href="URL_ZUR_ZIELSITE"><button class="flip-button">mehr Infos</button></a>
</div>
</div>
</div>
<!-- Flip-Card für VERTIKALE Drehung -->
<div class="flip-card-vertical">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="URL_ZU_IHRER_BILDDATEI" />
</div>
<div class="flip-card-back">
<h3>Titel</h3>
<p>Beschreibung</p>
<a href="URL_ZUR_ZIELSITE"><button class="flip-button">mehr Infos</button></a> </div>
</div>
</div>Wenn Sie den obigen Code in WordPress (oder in einem anderen CMS) verwenden wollen: Denken Sie daran, ein Code-Modul zu verwenden oder den Editor zunächst in die Text- oder Quellcodeansicht umzuschalten. Sonst verschluckt sich das System am HTML-Code. Unbedingt ersetzen müssen Sie freilich das anzuzeigende Bild (Zeilen 5 und 19) sowie den Titel, die Beschreibungen und die Zielseite des Buttons auf den Zeilen 8-10 und 22-24.
Probieren Sie es aus und spielen Sie mit den einzelnen Elementen. Der Effekt ist cool.
Werbung
Werbung
