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 |
||
| (4 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
.image- | .image-card { | ||
display: flex; | |||
flex-direction: column; | |||
height: 80vh; /* Approximate height */ | |||
position: relative; | position: relative; | ||
overflow: hidden; | |||
border-radius: 0.5rem; /* rounded-lg */ | |||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-lg */ | |||
text-decoration: none; /* remove underline from link */ | |||
} | } | ||
.image- | .image-card-image img { | ||
position: absolute; | |||
inset: 0; | |||
width: 100%; | |||
height: 100%; | |||
object-fit: cover; | |||
object-position: center; | |||
transition: transform 0.2s ease-in-out; | |||
} | |||
.image-card:hover .image-card-image img { | |||
transform: scale(1.1); | |||
} | } | ||
.image-overlay | .image-card-overlay { | ||
position: absolute; | position: absolute; | ||
inset: 0; | |||
background-color: #343a40; /* bg-dark */ | |||
opacity: 0.7; /* opacity-7 */ | |||
} | |||
.image-card-text { | |||
text-align: center; | position: relative; | ||
display: flex; | |||
flex-direction: column; | |||
align-items: center; /* Center text horizontally */ | |||
justify-content: center; /* Center text vertically */ | |||
text-align: center; /* Ensure text is centered */ | |||
padding: 1rem; /* Add some padding */ | |||
width: 100%; /* Ensure text takes full width */ | |||
} | } | ||
. | .image-card-text span:first-child { | ||
font-size: 1.125rem; /* text-lg */ | |||
font-weight: 600; /* font-semibold */ | |||
color: white; /* text-white */ | |||
} | } | ||
. | .image-card-text span:last-child { | ||
font-size: 0.875rem; /* text-sm */ | |||
color: #d1d5db; /* text-gray-300 */ | |||
} | } | ||
Aktuelle Version vom 27. Februar 2025, 11:46 Uhr
.image-card {
display: flex;
flex-direction: column;
height: 80vh; /* Approximate height */
position: relative;
overflow: hidden;
border-radius: 0.5rem; /* rounded-lg */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-lg */
text-decoration: none; /* remove underline from link */
}
.image-card-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.2s ease-in-out;
}
.image-card:hover .image-card-image img {
transform: scale(1.1);
}
.image-card-overlay {
position: absolute;
inset: 0;
background-color: #343a40; /* bg-dark */
opacity: 0.7; /* opacity-7 */
}
.image-card-text {
position: relative;
display: flex;
flex-direction: column;
align-items: center; /* Center text horizontally */
justify-content: center; /* Center text vertically */
text-align: center; /* Ensure text is centered */
padding: 1rem; /* Add some padding */
width: 100%; /* Ensure text takes full width */
}
.image-card-text span:first-child {
font-size: 1.125rem; /* text-lg */
font-weight: 600; /* font-semibold */
color: white; /* text-white */
}
.image-card-text span:last-child {
font-size: 0.875rem; /* text-sm */
color: #d1d5db; /* text-gray-300 */
}