57 lines
2.3 KiB
SCSS
57 lines
2.3 KiB
SCSS
.translate-y-5 {
|
|
transform: translateY(5px);
|
|
}
|
|
|
|
.image-container {
|
|
display: flex; /* Erlaubt ein flexibles Box-Layout */
|
|
flex-wrap: wrap; /* Erlaubt das Umfließen der Elemente auf die nächste Zeile */
|
|
justify-content: flex-start; /* Startet die Anordnung der Elemente am Anfang des Containers */
|
|
align-items: flex-start; /* Ausrichtung der Elemente am Anfang der Querachse */
|
|
padding: 10px; /* Abstand zwischen den Inhalten des Containers und dessen Rand */
|
|
}
|
|
|
|
.image-container span {
|
|
flex-flow: row;
|
|
display: flex;
|
|
width: fit-content;
|
|
height: fit-content;
|
|
}
|
|
|
|
.image-container span img {
|
|
max-height: 150px; /* Maximale Höhe der Bilder */
|
|
width: auto; /* Die Breite der Bilder passt sich automatisch an die Höhe an */
|
|
cursor: pointer;
|
|
margin: 10px;
|
|
}
|
|
// .image-container fa-icon {
|
|
// top: 0; /* Positioniert das Icon am oberen Rand des Bildes */
|
|
// right: 0; /* Positioniert das Icon am rechten Rand des Bildes */
|
|
// color: #fff; /* Weiße Farbe für das Icon */
|
|
// background-color: rgba(0,0,0,0.5); /* Halbtransparenter Hintergrund für bessere Sichtbarkeit */
|
|
// padding: 5px; /* Ein wenig Platz um das Icon */
|
|
// cursor: pointer; /* Verwandelt den Cursor in eine Hand, um Interaktivität anzudeuten */
|
|
// }
|
|
|
|
.image-wrap {
|
|
position: relative; /* Ermöglicht die absolute Positionierung des Icons bezogen auf diesen Container */
|
|
display: inline-block; /* Erlaubt die Inline-Anordnung, falls mehrere Bilder vorhanden sind */
|
|
}
|
|
|
|
/* Stil für das Bild */
|
|
.image-wrap img {
|
|
max-height: 150px;
|
|
width: auto;
|
|
display: block; /* Verhindert unerwünschten Abstand unter dem Bild */
|
|
}
|
|
|
|
/* Stil für das FontAwesome Icon */
|
|
.image-wrap fa-icon {
|
|
position: absolute;
|
|
top: 15px; /* Positioniert das Icon am oberen Rand des Bildes */
|
|
right: 15px; /* Positioniert das Icon am rechten Rand des Bildes */
|
|
color: #fff; /* Weiße Farbe für das Icon */
|
|
background-color: rgba(0,0,0,0.5); /* Halbtransparenter Hintergrund für bessere Sichtbarkeit */
|
|
padding: 5px; /* Ein wenig Platz um das Icon */
|
|
cursor: pointer; /* Verwandelt den Cursor in eine Hand, um Interaktivität anzudeuten */
|
|
border-radius: 8px; /* Optional: Abrunden der linken unteren Ecke für ästhetische Zwecke */
|
|
} |