Broek view

V000-36

Hoe te gebruiken?

Deze view heeft 2 varianten, 1 als preset-list met afbeeldingen en 1 als content select. Dit is de preset-list variant. Wil je de andere variant gebruiken? Bekijk hem hier.

Kopieer onderstaande HTML en CSS in je tempaltes.

Voorvertoning

Alvast beginnen met een basis opmaak?

Neem de onderstaande code over in de website om alvast met een basis opmaak te beginnen.
HTML
<section class="broek-view">
	<div class="container">
		<div class="row">
			<div class="col-12">
				<nc-element name="block-title" attributes="class=block-title" default="Titel" type="h2"></nc-element>
				<div class="py-3"></div>
			</div>
		</div>
		<div class="row">
			<div class="col-12">
				<div class="broek-blocks">
					<nc-preset-list name="branches" columns="12" columns-sm="12" columns-md="3" columns-lg="3">
						<div class="broek-item">
							<nc-image name="block-img-{%name%}" width="300" height="600" ratio="1" allow-link="true" alt-visible="true"></nc-image>
						</div>
				</div>
			</div>
		</div>
	</div>
</section>
CSS
section.broek-view .broek-blocks .broek-item {
	position: relative;
	display: flex;
	justify-content: center;
	width: 100%;
	margin-bottom: 1rem;
	transition: color 0.25s;
	border-radius: var(--panel-radius);
}

section.broek-view .broek-blocks .broek-item:before {
	position: absolute;
	display: flex;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: "";
	pointer-events: none;
	transition: background-color 0.5s;
	border-radius: var(--panel-radius);
}

section.broek-view .broek-blocks .broek-item img {
	aspect-ratio: 16 / 6;
	object-fit: cover;
	border-radius: var(--panel-radius);
	overflow: hidden;
}

section.broek-view .broek-blocks .broek-item .image-alt {
	position: absolute;
	bottom: 2rem;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: auto;
	color: var(--white);
	font-family: var(--font-family-heading);
	line-height: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	pointer-events: none;
	transition: bottom 0.25s;
}

section.broek-view .broek-blocks .broek-item:hover:before,
section.broek-view .broek-blocks .broek-item:focus:before {
	content: "";
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}

section.broek-view .broek-blocks .broek-item:hover .image-alt,
.broek-item:focus .image-alt {
	bottom: 0.8rem;
}

section.broek-view .broek-blocks .broek-item:hover .image-alt::after,
section.broek-view .broek-blocks .broek-item:focus .image-alt::after {
	display: block;
	content: "Meer informatie";
	font-family: var(--font-family-heading);
	font-size: 0.9rem;
	line-height: 1rem;
	color: var(--white);
	margin-top: 0.5rem;
	opacity: 1;
}

section.broek-view .broek-blocks .broek-item:hover .image-alt,
section.broek-view .broek-blocks .broek-item:focus .image-alt {
	color: var(--secondary)
}


@media only screen and (min-width: 768px) {
	section.broek-view .broek-blocks .broek-item .image-alt {
		font-size: 1rem;
	}

	section.broek-view .broek-blocks .broek-item:before {
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
	}

	section.broek-view .broek-blocks .broek-item img {
		aspect-ratio: auto;
		object-fit: none;
		height: 100%;
	}

	section.broek-view .broek-blocks .broek-item:hover .image-alt,
	section.broek-view .broek-blocks .broek-item:focus .image-alt {
		bottom: 6rem;
	}
}

@media only screen and (min-width: 992px) {

	section.broek-view .broek-blocks .broek-item .image-alt {
		font-size: 1.5rem;
	}

	section.broek-view .broek-blocks .broek-item:hover .image-alt,
	section.broek-view .broek-blocks .broek-item:focus .image-alt {
		bottom: 10rem;
	}
}

@media only screen and (min-width: 1200px) {

	section.broek-view .broek-blocks .broek-item:hover .image-alt,
	section.broek-view .broek-blocks .broek-item:focus .image-alt {
		bottom: 12rem;
	}
}