@nichoth/image
Version:
An image component
2 lines (1 loc) • 631 B
CSS
.placeholder{display:inline-block;min-width:50px;min-height:50px;background-color:#f6f6f6;background-size:cover;background-repeat:no-repeat;position:relative;overflow:hidden}.placeholder img{position:absolute;top:0;left:0;width:100%;height:100%}img.sharp{opacity:0}img.sharp.loaded{opacity:1;animation:sharpen .6s both}.blurry{filter:blur(30px)}@keyframes sharpen{0%{filter:blur(30px)}to{filter:blur(0px)}}.placeholder,.non-blurry-wrapper,.image{display:inline-block;height:50vw;width:50vw}.non-blurry-wrapper img,.image img{object-fit:cover;width:100%;height:100%}.blur-test img,.non-blurry-image img,.image img{object-fit:cover}