vr-file-upload-preview/vr-file-upload-preview.min.css

A simple file-upload lib that shows a preview of the uploaded image.

.vr-preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--vr-preview__auto-repeat__min,150px),1fr));gap:var(--vr-preview__gap,15px);max-height:var(--vr-preview,250px);overflow-y:auto;}.vr-preview-image{position:relative;overflow:hidden;}.vr-preview-image:hover .vr-preview-remove{opacity:1;}.vr-preview-image:hover .vr-preview-info{bottom:0;}.vr-preview-source{width:100%;height:var(--vr-preview-source__height,100px);box-sizing:border-box;transition:all 0.2s ease;background-size:cover;background-position:center center;background-repeat:no-repeat;background-color:var(--vr-preview-source__background-color,#e5effba8);display:flex;justify-content:center;align-items:center;font-weight:var(--vr-preview-source__font-weight,600);color:var(--vr-preview-source__color,#a0a0a0);user-select:none;}.vr-preview-remove{opacity:0;width:var(--vr-preview-remove__size,20px);height:var(--vr-preview-remove__size,20px);position:absolute;right:0;top:0;font-weight:bold;background-color:var(--vr-preview-remove__background,rgba(66,66,66,0.64));display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity 0.22s;color:var(--vr-preview-remove__color,#fff);}.vr-preview-info{position:absolute;right:0;bottom:var(--vr-preview-info__bottom,-30px);left:0;height:var(--vr-preview-info__height,24px);font-size:var(--vr-preview-info__font-size,0.8rem);background:rgba(66,66,66,0.64);display:flex;align-items:center;justify-content:space-between;padding:var(--vr-preview-info__padding,0 5px);transition:bottom 0.22s;color:var(--vr-preview-info__color,#fff);}