nitropage/src/features/page/css/image.css

A free and open source, extensible visual page builder based on SolidStart.

.np-image-container {
  position: relative;
  z-index: 0;
}

.np-image-container > * {
  width: 100%;
  height: 100%;
}

.np-image-container img {
  z-index: -10;
  position: relative;
}

.np-image-background {
  z-index: -20;
  position: absolute;
}

.np-image-container img,
.np-image-background > * {
  object-fit: var(--object-fit);
  object-position: var(--object-position);
  width: 100%;
  height: 100%;
}

.np-image {
  color: transparent;
}

.np-image.-fade {
  opacity: 0;
}

.np-image.-fade[data-loaded] {
  animation: var(--fade-duration) ease-in forwards np-fade-in;
}

.np-image.-showAlt {
  color: inherit;
}

@keyframes np-fade-in {
  to {
    opacity: 1;
  }
}