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; }