Vorlage:LandingPage/ImageCard/styles.css: Unterschied zwischen den Versionen
Aus Stadtsprachen
Nöth (Diskussion | Beiträge) Die Seite wurde neu angelegt: „.image-overlay-container { position: relative; display: inline-block; →Or block, depending on layout: } .image-overlay-image { display: block; } .image-overlay-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.6); →Semi-transparent background: color: white; padding: 10px; text-align: center; width: 90%; box-sizing: border-box; } .zoom { transition: t…“ |
Nöth (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 1: | Zeile 1: | ||
.image- | .image-card-container { | ||
position: relative; | position: relative; | ||
display: inline-block; /* Or block, depending on layout */ | display: inline-block; /* Or block, depending on layout */ | ||
} | } | ||
.image- | .image-card-image { | ||
display: block; | display: block; | ||
width: 100%; /* Ensure the image fills the container */ | |||
height: auto; | |||
} | } | ||
.image- | .image-card-text { | ||
position: absolute; | position: absolute; | ||
top: 50%; | top: 50%; | ||
left: 50%; | left: 50%; | ||
transform: translate(-50%, -50%); | transform: translate(-50%, -50%); | ||
background-color: rgba(0, 0, 0, 0.6); | background-color: rgba(0, 0, 0, 0.6); | ||
color: white; | color: white; | ||
padding: 10px; | padding: 10px; | ||
| Zeile 22: | Zeile 24: | ||
.zoom { | .zoom { | ||
transition: transform 0.3s ease; | transition: transform 0.3s ease; | ||
} | } | ||
.zoom:hover { | .zoom:hover { | ||
transform: scale(1.1); /* | transform: scale(1.1); | ||
} | |||
/* Make the container clickable */ | |||
.image-card-container { | |||
cursor: pointer; | |||
} | } | ||
Version vom 27. Februar 2025, 11:33 Uhr
.image-card-container {
position: relative;
display: inline-block; /* Or block, depending on layout */
}
.image-card-image {
display: block;
width: 100%; /* Ensure the image fills the container */
height: auto;
}
.image-card-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.6);
color: white;
padding: 10px;
text-align: center;
width: 90%;
box-sizing: border-box;
}
.zoom {
transition: transform 0.3s ease;
}
.zoom:hover {
transform: scale(1.1);
}
/* Make the container clickable */
.image-card-container {
cursor: pointer;
}