vr-file-upload-preview/vr-file-upload-preview.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);
}