<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";
@include molecule(icon-overlay) {
position: relative;
width: 100%;
overflow: hidden;
border-radius: $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 e(button) {
position: absolute;
z-index: 3;
top: 50%;
left: 50%;
width: rhythm(7);
height: rhythm(7);
padding: 0;
transform: translateX(-50%) translateY(-50%);
border: 0;
background-color: transparent;
&:hover,
&:focus {
> svg {
fill: $color-concrete;
}
}
@include bp-up(sm) {
width: rhythm(10);
height: rhythm(10);
}
}
@include e(icon) {
width: rhythm(7);
height: rhythm(7);
fill: $color-snow;
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.4));
cursor: pointer;
@include bp-up(sm) {
width: rhythm(10);
height: rhythm(10);
}
}
@include 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: $color-concrete;
padding-left: rhythm(2);
padding-right: rhythm(2);
}
}
No notes defined.