@ozen-ui/kit

Version:
React component library
47 lines (39 loc) • 859 B
CSS
.ImageBase {
  position: relative;
  inline-size: 100%;
  overflow: hidden;
}

  .ImageBase-Image {
    position: absolute;
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    transition: var(--transition-default) opacity;
  }

  .ImageBase-Image_visible {
    opacity: 1;
  }

  .ImageBase-Loader, .ImageBase-Placeholder {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 100%;
  }

  .ImageBase-Fade-enter {
      opacity: 0;
    }

  .ImageBase-Fade-enter-active {
      opacity: 1;
      transition: var(--transition-default) opacity;
    }

  .ImageBase-Fade-exit {
      opacity: 1;
    }

  .ImageBase-Fade-exit-active {
      opacity: 0;
      transition: var(--transition-default) opacity;
    }