<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
}
  • Content:
    @charset "UTF-8";
    
    @include molecule(icon-overlay) {
    	position: relative;
    	width: 100%;
    	overflow: hidden;
    
    	> 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: z_index(foregroundMinus);
    		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);
    		}
    	}
    }
    
  • URL: /components/raw/icon-overlay/_icon-overlay.scss
  • Filesystem Path: src/molecules/icon-overlay/_icon-overlay.scss
  • Size: 981 Bytes

No notes defined.