England Football

Hero Overlay Image 

<div class="hero-overlay-image hero-overlay-image--overlay ">
    <img class="hero-overlay-image__img" src="/assets/example-content/hero-overlay-background-image.jpg" alt="">
    <div class="hero-section">
        <div class="hero-section__partner-logos">
            <img src="/assets/example-content/hero-partner-bt.png" alt="Nike" />
            <img src="/assets/example-content/hero-partner-deliveroo.png" alt="BT" />
        </div>
        <h3 class="hero-section__title">Eight England outsiders making a case for Gareth Southgate&#x27;s match against Iceland</h3>
        <div class="hero-section__description">Lorem ipsum dolor sit amet, consectetur</div>
        <div class="hero-section__count-down">
            <div class="days"><span>2</span>Days</div>
            <div class="hours"><span>3</span>Hours</div>
            <div class="minutes"><span>2</span>Minutes</div>
            <div class="seconds"><span>12</span>Seconds</div>
        </div>
        <div class="hero-section__cta">
            <a href="/" class="cta cta--secondary ">
                <p>Latest News</p>
            </a>

        </div>
    </div>
</div>

No notes defined.

{
  "modifier": "overlay",
  "image": "/assets/example-content/hero-overlay-background-image.jpg",
  "overlay": {
    "countdown": {
      "day": "2",
      "hours": "3",
      "minutes": "2",
      "seconds": "12"
    },
    "cta": {
      "modifier": "secondary",
      "copy": "Latest News"
    }
  }
}
  • Content: 
    .hero-overlay-image {
  position: relative;
  text-decoration: none;
  display: flex;
  justify-content: center;
  background-color: $grey2;
  width: 100%;

  &__img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: calc(100vh - 64px);
    max-height: none;
  }

  &--overlay {
    &::after {
      background: linear-gradient(
        180deg,
        rgba(29, 29, 27, 0.2) 0%,
        rgba(29, 29, 27, 0.7) 100%
      );
      bottom: 0;
      content: '';
      display: block;
      height: 100%;
      top: 0;
      width: 100%;
      position: absolute;
      border-radius: 0 0 0.8rem 0.8rem;
      z-index: 0;
    }
  }

  @media screen and (min-width: $mq-medium) {
    &__img {
      height: calc(100vh - 81px);
    }
  }

  @media screen and (max-width: $mq-medium) {
    &__img {
      width: 100vw;
    }
  }
}

.fixed-banner {
  .hero-overlay-image {
    position: fixed;
    top: 64px;

    &__img {
      height: 57.6rem;
    }

    @media screen and (min-width: 820px) {
      top: 81px;
      &__img {
        height: 54rem;
      }
    }

    @media screen and (min-width: 1040px) {
      top: 81px;
      &__img {
        height: 61.9rem;
      }
    }
  }
}

.shallow-image {
  .hero-overlay-image__img {
    height: 42.4rem;
    max-height: 42.4rem;
    max-width: 144rem;
  }

  @media screen and (min-width: $mq-medium) {
    .hero-overlay-image__img {
      height: 48rem;
      max-height: 48rem;
    }

    &::after {
      max-width: 144rem;
    }
  }
}
  • URL: /components/raw/hero-overlay-image/hero-overlay-image.scss
  • Filesystem Path: src/library/modules/hero-overlay-banner/hero-overlay-image/hero-overlay-image.scss
  • Size: 1.6 KB 
<div class="hero-overlay-image {{#if modifier}}hero-overlay-image--{{modifier}}{{/if}} {{#if shallow}}shallow-image{{/if}}">
  <img class="hero-overlay-image__img" src="{{image}}" alt="">
  {{render '@hero-section' overlay merge="true"}}
</div>