Vorlage:LandingPage/ImageCard/styles.css - Versionsgeschichte

Nöth am 27. Februar 2025 um 11:46 Uhr

2025-02-27T11:46:56Z

← Nächstältere Version		Version vom 27. Februar 2025, 11:46 Uhr
Zeile 6:		Zeile 6:
	overflow: hidden;		overflow: hidden;
	border-radius: 0.5rem; /* rounded-lg */		border-radius: 0.5rem; /* rounded-lg */
	~~background-color: #f3f4f6; /* bg-gray-100 */~~
	~~padding: 1rem; /* p-4 */~~
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-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 */		text-decoration: none; /* remove underline from link */
Zeile 41:		Zeile 39:
	text-align: center; /* Ensure text is centered */		text-align: center; /* Ensure text is centered */
	padding: 1rem; /* Add some padding */		padding: 1rem; /* Add some padding */
			width: 100%; /* Ensure text takes full width */
	}		}

	.image-card-text span:~~last~~-child {		.image-card-text span:first-child {
	font-size: 1.125rem; /* text-lg */		font-size: 1.125rem; /* text-lg */
	font-weight: 600; /* font-semibold */		font-weight: 600; /* font-semibold */
Zeile 49:		Zeile 48:
	}		}

	~~@media (min-width: 1024px) {~~		.image-card-text span:last-child {
	.image-card-text span:last-child {		font-size: 0.875rem; /* text-sm */
	font-size: 1.~~25rem~~; /* ~~lg:~~text-xl */		color: #d1d5db; /* text-gray-300 */
	}
	}		}

Nöth am 27. Februar 2025 um 11:44 Uhr

2025-02-27T11:44:35Z

← Nächstältere Version		Version vom 27. Februar 2025, 11:44 Uhr
Zeile 26:		Zeile 26:
	}		}

	.image-card-~~gradient~~ {		.image-card-overlay {
	background: ~~linear~~-~~gradient(to top, rgba(55, 65, 81,~~ 0.~~5), transparent, transparent)~~; /* ~~bg-gradient-to-t from-gray-800 via-transparent to-transparent~~ opacity-50 */		position: absolute;
			inset: 0;
			background-color: #343a40; /* bg-dark */
			opacity: 0.7; /* opacity-7 */
	}		}

Zeile 34:		Zeile 37:
	display: flex;		display: flex;
	flex-direction: column;		flex-direction: column;
	}		align-items: center; /* Center text horizontally */
			justify-content: center; /* Center text vertically */
	~~.image-card~~-text ~~span:first-child {~~		text-align: center; /* Ensure text is centered */
	~~color~~: ~~#d1d5db~~; /* ~~text-gray-300~~ */		padding: 1rem; /* Add some padding */
	}		}

Nöth am 27. Februar 2025 um 11:42 Uhr

2025-02-27T11:42:37Z

@@ Zeile 1: / Zeile 1: @@
-.overlay-image-container {
+.image-card {
    position: relative;
-   display: inline-block; /* Or block, depending on your layout */
+   overflow: hidden;
+}
-.overlay-image-text {
+.image-card-image img {
    position: absolute;
-   top: 50%;
+   inset: 0;
    width: 100%;
+}
-.overlay-image-image img {
+.image-card:hover .image-card-image img {
-   display: block;
+   transform: scale(1.1);
+}
-.opacity-4 {
+.image-card-gradient {
-     opacity: 0.4;
+  background: linear-gradient(to top, rgba(55, 65, 81, 0.5), transparent, transparent); /* bg-gradient-to-t from-gray-800 via-transparent to-transparent opacity-50 */
+}

Nöth am 27. Februar 2025 um 11:39 Uhr

2025-02-27T11:39:47Z

← Nächstältere Version		Version vom 27. Februar 2025, 11:39 Uhr
Zeile 1:		Zeile 1:
	.image~~-card~~-container {		.overlay-image-container {
	position: relative;		position: relative;
	display: inline-block; /* Or block, depending on layout */		display: inline-block; /* Or block, depending on your layout */
	}		}

	.~~image-card~~-image {		.overlay-image-text {
	~~display: block;~~
	~~width: 100%; /* Ensure the image fills the container */~~
	~~height: auto;~~
	}

	~~.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)~~;		color: white; /* Or any desired text color */
	color~~: white;~~		padding: 10px; /* Adjust padding as needed */
	padding: 10px;
	text-align: center;		text-align: center;
	width: 90%;		width: 100%;
	~~box-sizing: border-box~~;
	}		}

	.~~zoom~~ {		.overlay-image-image img {
	~~transition~~: ~~transform 0.3s ease~~;		display: block;
	}		width: 100%; /* Make the image fill the container */
			height: auto;
	~~.zoom~~:~~hover {~~
	~~transform~~: ~~scale(1.1)~~;
	}		}

	~~/* Make the container clickable */~~		.opacity-4 {
	.~~image~~-~~card-container~~ {		opacity: 0.4;
	~~cursor~~: ~~pointer~~;
	}		}

Nöth am 27. Februar 2025 um 11:33 Uhr

2025-02-27T11:33:29Z

← Nächstältere Version		Version vom 27. Februar 2025, 11:33 Uhr
Zeile 1:		Zeile 1:
	.image-~~overlay~~-container {		.image-card-container {
	position: relative;		position: relative;
	display: inline-block; /* Or block, depending on layout */		display: inline-block; /* Or block, depending on layout */
	}		}

	.image-~~overlay~~-image {		.image-card-image {
	display: block;		display: block;
			width: 100%; /* Ensure the image fills the container */
			height: auto;
	}		}

	.image-~~overlay~~-text {		.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); ~~/* Semi-transparent background */~~		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; ~~/* Add transition for smooth zoom */~~		transition: transform 0.3s ease;
	}		}

	.zoom:hover {		.zoom:hover {
	transform: scale(1.1); /* ~~Zoom on hover~~ */		transform: scale(1.1);
			}

			/* Make the container clickable */
			.image-card-container {
			cursor: pointer;
	}		}

Nöth: 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…“

2025-02-27T11:30:51Z

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…“

Neue Seite

.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: transform 0.3s ease; /* Add transition for smooth zoom */
}

.zoom:hover {
transform: scale(1.1); /* Zoom on hover */
}