ds4/scss/components/shared/_rollable_image.scss

/*
 * SPDX-FileCopyrightText: 2021 Johannes Loher
 *
 * SPDX-License-Identifier: MIT
 */

.ds4-rollable-image {
  position: relative;

  &--rollable {
    cursor: pointer;

    &:hover {
      .ds4-rollable-image__image {
        opacity: 0.25;
      }

      .ds4-rollable-image__overlay {
        opacity: 1;
      }
    }
  }

  &__image {
    border: none;
    transition: 0.1s ease;
  }

  &__overlay {
    border: none;
    bottom: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: 0.1s ease;
  }
}