Broek

V239-09

Hoe te gebruiken?

Kopieer onderstaande HTML en CSS regels in je template en selecteer de content select module in het NASA systeem.

Voorvertoning

Alvast beginnen met een basis opmaak?

HTML
Kopiëren<section class="broek-view">
	<div class="container">
		<div class="row">
			<div class="col-12">
				<nc-element name="broek-title" default="Title" type="h2"></nc-element>
				<div class="py-3"></div>
			</div>
		</div>
		<nc-content-select name="broek-blocks" title="menu" rows="1" columns-xs="12" columns-sm="12"></nc-content-select>
	</div>
</section>

CSS
Kopiërensection.broek-view .content .intro .text {
	display: none;
}

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

section.broek-view .panel-item .content {
	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 .panel-item {
	position: relative;
	display: flex;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin-bottom: 1rem;
	border-radius: var(--panel-radius);
}

section.broek-view .panel-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 .panel-item:hover:before,
section.broek-view .panel-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 .panel-item:hover .content,
section.broek-view .panel-item:focus .content {
	bottom: 0.8rem;
}

section.broek-view .panel-item:hover .content .title,
section.broek-view .panel-item:focus .content .title {
	color: var(--secondary)
}

section.broek-view .panel-item .content .title:before {
	color: var(--tertiary);
}

section.broek-view .panel-item .content .readmore {
	opacity: 0;
}

section.broek-view .panel-item:hover .readmore {
	opacity: 1;

}

@media only screen and (min-width: 768px) {
	section.broek-view .panel-item .content .title {
		font-size: 1.2rem;
	}

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

	section.broek-view .panel-item img {
		aspect-ratio: auto;
		object-fit: cover;
		height: 500px;
	}

	section.broek-view .panel-item:hover .content,
	section.broek-view .panel-item:focus .content {
		bottom: 11rem;
	}
}

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

	section.broek-view .panel-item:hover .content,
	section.broek-view .panel-item:focus .content {
		bottom: 11rem;
	}

	section.broek-view .panel-item .content .title {
		font-size: 1.6rem;
	}
}

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

	section.broek-view .panel-item:hover .content,
	section.broek-view .panel-item:focus .content {
		bottom: 12rem;
	}
}