<div class="m-icon-overlay">
<img src="/assets/images/ALX_0876.jpg" alt="" />
<button type="button" class="m-icon-overlay__button" aria-label="play"><svg class="icon m-icon-overlay__icon">
<use xlink:href="#icon-play"></use>
</svg>
</button>
</div>
<div class="m-icon-overlay{{#if additional_classes}} {{additional_classes}}{{/if}}" {{#if youtube}}data-youtube="{{youtube}}"{{/if}}>
{{#if img_url}}<img src="{{img_url}}" alt="{{alt}}" />{{/if}}
<button type="button" class="m-icon-overlay__button" aria-label="play">{{> @icon id=overlay_icon additional_classes="m-icon-overlay__icon"}}</button>
</div>
{
"title": "Icon overlay",
"description": "Lägg en ikon ovanpå en container",
"img_url": "/assets/images/ALX_0876.jpg",
"overlay_icon": "play",
"additional_classes": false
}
@charset "UTF-8";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/config' as config;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;
@use '../../vendor/grid/breakpoints' as breakpoint;
@use '../../vendor/grid/grid' as grid;
@include mixin.molecule(icon-overlay) {
position: relative;
width: 100%;
overflow: hidden;
border-radius: var.$border-radius;
> img {
display: block;
width: 100%;
object-fit: cover;
object-position: 50% center;
min-height: 100%;
}
img {
position: relative;
z-index: 2;
}
iframe {
position: absolute;
z-index: 1;
top: 0;
left: 0;
}
@include bem.e(button) {
position: absolute;
z-index: 3;
top: 50%;
left: 50%;
width: func.rhythm(7);
height: func.rhythm(7);
padding: 0;
transform: translateX(-50%) translateY(-50%);
border: 0;
background-color: transparent;
&:hover,
&:focus {
> svg {
fill: colors.$color-concrete;
}
}
@include breakpoint.bp-up(sm) {
width: func.rhythm(10);
height: func.rhythm(10);
}
}
@include bem.e(icon) {
width: func.rhythm(7);
height: func.rhythm(7);
fill: colors.$color-snow;
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.4));
cursor: pointer;
@include breakpoint.bp-up(sm) {
width: func.rhythm(10);
height: func.rhythm(10);
}
}
@include bem.e(message) {
display: flex;
flex-direction: column;
position: absolute;
z-index: 4;
top: 0;
right: 0;
bottom: 0;
left: 0;
align-items: center;
justify-content: center;
text-align: center;
background: colors.$color-concrete;
padding-left: func.rhythm(2);
padding-right: func.rhythm(2);
}
}
No notes defined.