Trick # 570 | Dieser Beitrag beinhaltet 877 Wörter. – Geschätzte Lesezeit: ca. 5 Minuten.
Heute gestalten wir eine kleine Bildergalerie. Doch diese zeigt die einzelnen Bilder nicht im üblichen Zuschnitt an, sondern macht jedes Element zu einem Hexagon. Sieht ganz hübsch aus und ist gar nicht schwierig.
Unsere Bildergalerie soll als Bienenwabe dargestellt werden. In jeder einzelnen Zelle erscheint ein Bild.
Letztlich soll es so aussehen:
Für eine solche Galerie benötigen Sie einerseits einen HTML-Code und zusätzlich noch etwas CSS. Beginnen wir mit dem HTML.
Den folgenden Block können Sie in der HTML- oder Text-Ansicht Ihres WYSIWYG-Editors einfügen:
<section class="hexagon-gallery">
<div class="hex"><img src="https://dr-code.ch/wp-content/uploads/jersey-6-scaled.jpg"></div>
<div class="hex"><img src="https://dr-code.ch/wp-content/uploads/jersey-5-scaled.jpg"></div>
<div class="hex"><img src="https://dr-code.ch/wp-content/uploads/paris-2-scaled.jpg"></div>
<div class="hex"><img src="https://dr-code.ch/wp-content/uploads/jersey-4-scaled.jpg"></div>
<div class="hex"><img src="https://dr-code.ch/wp-content/uploads/jersey-1-scaled.jpg"></div>
<div class="hex"><img src="https://dr-code.ch/wp-content/uploads/lake-lagarja-99-scaled.jpg"></div>
<div class="hex"><img src="https://dr-code.ch/wp-content/uploads/jersey-3-scaled.jpg"></div>
<div class="hex"><img src="https://dr-code.ch/wp-content/uploads/paris-1-scaled.jpg"></div>
<div class="hex"><img src="https://dr-code.ch/wp-content/uploads/giessbach2-278-scaled.jpg"></div>
<div class="hex"><img src="https://dr-code.ch/wp-content/uploads/jersey-2-scaled.jpg"></div>
</section>Die einzelnen Bilder (also die Dateinamen im img-Tag) ersetzen SIe dabei natürlich mit Ihren eigenen Bildern.
Um die oben gezeigte Darstellung zu erhalten folgt nun noch ein wenig CSS-Styling. Deponieren Sie dazu den folgenden Code im CSS-Stylesheet Ihrer Website – im WordPress-Backend finden Sie dieses unter Design/Customizer/Zusätzliches CSS:
img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}.hexagon-gallery {
margin: auto;
margin-top: 50px;
max-width: 1000px;
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-auto-rows: 200px;
grid-gap: 14px;
padding-bottom: 50px;
}.hex {
display: flex;
position: relative;
width: 240px;
height: 265px;
background-color: #424242;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}.hex:first-child {
grid-row-start: 1;
grid-column: 2 / span 2;
}.hex:nth-child(2) {
grid-row-start: 1;
grid-column: 4 / span 2;
}.hex:nth-child(3) {
grid-row-start: 1;
grid-column: 6 / span 2;
}.hex:nth-child(4) {
grid-row-start: 2;
grid-column: 1 / span 2;
}.hex:nth-child(5) {
grid-row-start: 2;
grid-column: 3 / span 2;
}.hex:nth-child(6) {
grid-row-start: 2;
grid-column: 5 / span 2;
}.hex:nth-child(7) {
grid-row-start: 2;
grid-column: 7 / span 2;
}.hex:nth-child(8) {
grid-row-start: 3;
grid-column: 2 / span 2;
}.hex:nth-child(9) {
grid-row-start: 3;
grid-column: 4 / span 2;
}.hex:nth-child(10) {
grid-row-start: 3;
grid-column: 6 / span 2;
}Das ist schon alles.
Hübsch und gar nicht schwierig. Oder?
Werbung
Werbung
