/* * shadow-image.js * <[email protected]> (https://tungu.me) * Released under the MIT License. */ const headCss = '@supports (-ms-ime-align: auto) { .image-shadow { display: none; } } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .image-shadow { display: none; } }'; const head = document.head || document.getElementsByTagName('head')[0]; const style = document.createElement('style'); style.type = 'text/css'; if (style.styleSheet) { style.styleSheet.cssText = headCss; } else { style.appendChild(document.createTextNode(headCss)); } head.appendChild(style); document.querySelectorAll('.ishadow').forEach(function(el) { el.style.position = 'relative'; const realImage = el.getElementsByTagName('img')[0]; const imageSource = realImage.getAttribute('src'); const shadowBox = document.createElement('div'); const parent = realImage.parentNode; const blurValue = realImage.getAttribute('data-blur'); shadowBox.classList.add('image-shadow'); parent.insertBefore(shadowBox, realImage.nextSibling); const styles = { backgroundImage: `url('${imageSource}')`, WebkitFilter: `blur(${blurValue}px)`, position: 'absolute', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', backgroundSize: '100%', bottom: '-10%', left: '5%', width: '90%', height: '95%', zIndex: '-1', }; Object.keys(styles).forEach(function(key) { shadowBox.style[key] = styles[key]; }); });
body { margin: 0; line-height: 1 } img { max-width: 100% } .container { display: grid; padding: 2em; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 20px; grid-row-gap: 80px; justify-items: stretch; align-items: stretch; max-width: 1080px; margin: 0 auto } h1 { text-align: center; font-size: 2em; font-family: system-ui, sans-serif; margin: 1em; font-weight: 700; color: #282828 }
<div class="container"> <div class="ishadow"> <img class="img" data-blur="20" src="https://picsum.photos/500/300"> </div> <div class="ishadow"> <img class="img" data-blur="20" src="https://picsum.photos/500/301"> </div> <div class="ishadow"> <img class="img" data-blur="5" src="https://picsum.photos/500/302"> </div> </div>