Plastic blocks

V000-37

Hoe te gebruiken?

Kopieer onderstaande HTML en CSS in je template.

Voorvertoning

Alvast beginnen met een basis opmaak?

HTML
Kopiëren <section class="plastic-blocks-view">
		<div class="container">
			<nc-preset-list name="content-block" columns="3">

				<div class="plastic-block">
					<nc-image name="block-img-{%name%}" width="400" height="540" ratio="0.3" loading="{%loading%}"></nc-image>

					<div class="plastic-block-content">
						<div class="block-text">
							<nc-text name="plastic-block-{%name%}"></nc-text>
						</div>

						<div class="block-button">
							<nc-text name="block-button-{%name%}"></nc-text>
						</div>
					</div>
				</div>

			</nc-preset-list>
		</div>
	</section>

CSS
Kopiëren.plastic-block {
	position: relative;
	margin: 1rem 0;
}

.plastic-block img {
	position: relative;
	max-height: 300px;
	object-fit: cover;
	border-radius: var(--panel-radius);
}

.plastic-block div[data-partial="image"] {
	position: relative;
}

.plastic-block div[data-partial="image"]::before {
	content: "";
	background-color: var(--primary);
	opacity: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transition: opacity 0.4s;
	z-index: 1;
	border-radius: var(--panel-radius);
}


body:not([data-editor-mode="content"], [data-editor-mode="layout"]) .plastic-block .plastic-block-content {
	position: absolute;
	bottom: 0;
	padding: 1rem;
	color: #fff;
	z-index: 2;
	width: 100%;
}

body:not([data-editor-mode="content"]) .plastic-block .plastic-block-content .block-text p {
	transition: 0.4s opacity;
	opacity: 0;
}

@media only screen and (min-width: 992px) {
	.plastic-block img {
		max-height: unset;
	}
}

body:not([data-editor-mode="content"]) .plastic-block:hover .plastic-block-content .block-text p {
	opacity: 1;
}

.plastic-block:hover div[data-partial="image"]::before {
	opacity: 0.6;
}