blazy.css in Blazy 8.2

File

css/blazy.css

/**
 * @file
 */

.blazy,
.blazy *,
.blazy *::before,
.blazy *::after {
  box-sizing: border-box;
}

/* The lazyloaded element: IMG, IFRAME, DIV. */
.b-lazy,
.b-responsive {
  display: block;
  height: auto;
  min-height: 1px;
  opacity: 0;
  transition: opacity 500ms ease-in;
}

/* Needed to display preloader with CSS BG image, otherwise hidden. */
.b-loaded,
.b-error,
/* @todo deprecated and removed media--loading for is-b-loading to make sense outside media. */
.b-bg.media--loading,
.b-bg.is-b-loading {
  opacity: 1;
}

.b-bg {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}

/* The .blazy container is not always preset such at lightboxes. */
.litebox,
.blazy iframe,
.media iframe {
  border: 0;
  display: block;
  max-width: 100%;
}

.media-wrapper--inline {
  max-width: 100%;
}

/** Fix for conflict with Bootstrap CSS if not using aspect ratio. */
.blazy .media {
  display: block;
  position: relative;
}

/**
 * Non-js element. Supports both BG, or inline media.
 * Makes generic animation contaitner, either blur, or other animate.css.
 */
.media--fx {
  /* Hide extra blur edges. */
  overflow: hidden;
  /* Dup for BlazyFilter which has no .blazy container. */
  position: relative;
}

.media--fx img {
  /* Prevents unwanted alt text from showing. */
  color: transparent;
  display: block;
  /* Prevents blinking. */
  opacity: 1;
  /* Prevents collapsing thumbnail image if Aspect ratio is disabled. */
  width: 100%;
}

/* Aspect ratio element: IMG, IFRAME, DIV. */
.media--ratio .media__element,
.media--fx .b-blur {
  bottom: 0;
  height: 100%;
  left: 0;
  min-height: 1px;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 0;
  /** Temp fix, also to fix the VIDEO element to max width, not only IMG. */
  object-fit: cover;
}

/**
 * The blur image, to support various usages: native, BG and regular IMG.
 * The native lazy load swaps placeholders for real images, makes it impossible
 * to have blur effect, that is why we put it into another IMG.
 */
.media--fx .b-blur {
  color: transparent;
  /* < 980: The less the more artifacts. The more the slower. */
  filter: blur(3px);
  opacity: .9;
  /* Longer than animation timing to let the actual image surface better. */
  transition: opacity 1.2s;
  /* Avoid overlaying, this causes unwanted dark shadow and more artifacts. */
  /* z-index: 1; */
}

.media--fx-lg .b-blur {
  /* > 980: The less the more artifacts. The more the slower. */
  filter: blur(6px);
  /* Reduces artifacts due to being large. */
  opacity: .8;
}

.animated img {
  opacity: 1;
}

/* Be sure to add width to the container accordingly, otherwise collapsed. */
.field[data-blazy] {
  min-width: 50%;
}