Plastic blocks

V000-37

Hoe te gebruiken?

Kopieer onderstaande HTML en CSS in je template.

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="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
.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;
}