College of Business Style Guide

Hover box: Cta 

<div class="hover-box">
    <div class="hover-box-cta">
        <div class="hover-box-content">
            <h2>Visit Lehigh Business</h2>
            <ul class="cta-list">
                <li><a href="#" class="button dark-grey" role="button">Take a Virtual Tour</a>
                </li>
                <li><a href="#" class="button dark-grey" role="button">Schedule Undergraduate Visit</a>
                </li>
                <li><a href="#" class="button dark-grey" role="button">Schedule Graduate Visit</a>
                </li>
            </ul>
        </div>
    </div><!-- end hover-box-text -->
</div><!-- end hover-box -->
 
<div class="hover-box">
    <div class="hover-box-cta">
        <div class="hover-box-content">
            <h2>{{ title }}</h2>
            <ul class="cta-list">
                {% block cms_override %}
                    {% for button in buttons %}
                        <li>{% include "@buttons--a-tag" with button only %}</li>
                    {% endfor %}
                {% endblock cms_override %}
            </ul>
        </div>
    </div><!-- end hover-box-text -->
</div><!-- end hover-box -->
 
{
  "hover_box_card": true,
  "img_src": "/images/Hulvat-2017-2.png",
  "url": "#",
  "title": "Visit Lehigh Business",
  "content": "Somebody once told me the world is gonna roll me. I ain't the sharpest tool in the shed. She was looking kind of dumb with her finger and her thumb.",
  "color": "blue",
  "background-color": "light-grey",
  "buttons": {
    "1": {
      "text": "Take a Virtual Tour",
      "url": "#",
      "color": "dark-grey"
    },
    "2": {
      "text": "Schedule Undergraduate Visit",
      "url": "#",
      "color": "dark-grey"
    },
    "3": {
      "text": "Schedule Graduate Visit",
      "url": "#",
      "color": "dark-grey"
    }
  }
}
  • Content: 
    .hover-box {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;

  @media only screen and (max-width: $break-desktop) {
    background-image: none !important;
  }

  @media only screen and (min-width: $break-desktop) {
    width: 358px;
    height: 336px;
  }

  a {
    &:hover,
    &:focus {
      text-decoration: none;
    }
  }

  &-image {
    img {
      width: 100%;
    }
  }

  &-text,
  &-color_overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: $space;
    bottom: 0;
    color: $white;

    @media only screen and (min-width: $break-desktop) {
      background: linear-gradient(rgba(80, 83, 31, 0.6), rgba(0, 0, 0, 0.6));

      &.gold {
        background: linear-gradient(rgba(251, 221, 64, 0.8), rgba(0, 0, 0, 0.8));
      }

      &.teal {
        background: linear-gradient(rgba(136, 198, 188, 0.8), rgba(0, 0, 0, 0.8));
      }

      &.blue {
        background: linear-gradient(rgba(129, 176, 210, 0.8), rgba(0, 0, 0, 0.8));
      }

      &.brown {
        background: linear-gradient(rgba(80, 45, 14, 0.8), rgba(0, 0, 0, 0.8));
      }
    }
  }

  &-content {
    position: absolute;

    @media only screen and (min-width: $break-desktop) {
      bottom: -$space-triple;
      height: 125px;
      padding: 0 $space-three-quarter 0 0;
      overflow-y: hidden;
      transition: all 0.25s ease;
    }

    h2 {
      @media only screen and (min-width: $break-desktop) {
        &::before {
          content: "+";
          display: block;
        }
      }
    }
  }

  a {
    &:hover,
    &:focus {
      .hover-box-content {
        bottom: 1rem;
        transition: all 0.25s ease;

        h2 {
          &::before {
            display: none;
          }
        }
      }

      .hover-box-cta {
        .hover-box-content {
          bottom: inherit;
        }
      }
    }
  }

  &.zoom {
    width: inherit;
    height: inherit;
    max-width: 100%;
    min-width: 100%;
    overflow: hidden;

    @media only screen and (min-width: $break-tablet) {
      max-width: 50%;
      min-width: 50%;
    }

    @media only screen and (min-width: $break-desktop) {
      max-width: 50%;
      min-width: 50%;
    }

    &.spotlight,
    &.no_text {
      @media only screen and (min-width: $break-tablet) {
        max-width: 25%;
        min-width: 25%;
      }

      @media only screen and (min-width: $break-desktop) {
        max-width: 25%;
        min-width: 25%;
      }

      .hover-box-content {
        @media only screen and (min-width: $break-desktop) {
          height: 160px;
        }
      }
    }

    &.no_text {
      @media only screen and (min-width: $break-tablet) {
        max-width: 100%;
        min-width: 100%;
      }
    }

    .hover-box-image {
      height: 100%;
      width: 100%;

      img {
        width: 100%;
        transition: transform .2s;
      }
    }

    &:hover,
    &:focus {
      .hover-box-image {
        img {
          transform: scale(1.25);
        }
      }
    }

    .hover-box-text,
    .hover-box-color_overlay {
      &.gold {
        background: linear-gradient(rgba(251, 221, 64, 0.8), rgba(0, 0, 0, 0.8));
      }

      &.teal {
        background: linear-gradient(rgba(136, 198, 188, 0.8), rgba(0, 0, 0, 0.8));
      }

      &.blue {
        background: linear-gradient(rgba(129, 176, 210, 0.8), rgba(0, 0, 0, 0.8));
      }

      &.brown {
        background: linear-gradient(rgba(80, 45, 14, 0.8), rgba(0, 0, 0, 0.8));
      }
    }

    .hover-box-content {
      overflow-y: inherit;
      bottom: $space-triple;
      width: 66%;

      @media only screen and (min-width: $break-tablet) {
        width: 80%;
        bottom: $space;
      }

      @media only screen and (min-width: $break-desktop) {
        height: 145px;
      }

      h2 {
        &::before {
          content: '';
        }
      }
    }

    &:hover,
    &:focus {
      .hover-box-content {
        height: $space-septuple;
      }
    }

    &.spotlight {
      &:hover,
      &:focus {
        .hover-box-content,
        .hover-box-color_overlay {
          height: $space-nonagon;
        }
      }
    }
  }

  &.three {
    @media only screen and (min-width: $break-desktop) {
      max-width: calc(100% / 3);
      min-width: calc(100% / 3);
    }
  }

  &-cta {
    background-color: $grey_lightest;
    height: 100%;
    padding: $space-double;
    text-align: center;

    .hover-box-content {
      position: relative;
      bottom: inherit;
      height: inherit;

      h2 {
        &::before {
          content: '';
        }
      }

      .cta-list {
        @include reset-list-nav;
        margin: $space-double 0 0 0;

        li {
          width: 100%;
          margin: 0 0 $space-one-half 0;

          .button {
            width: 100%;
          }
        }
      }
    }
  }

  &.card {
    margin: 0 !important;
    padding: $space 0;

    @media only screen and (min-width: $break-desktop) {
      margin: $space !important;
      padding: 0;
    }

    .hover-box-text,
    .hover-box-content {
      position: unset;

      @media only screen and (min-width: $break-desktop) {
        position: absolute;
      }
    }

    .hover-box-text {
      color: $grey_darkest;

      @media only screen and (min-width: $break-desktop) {
        color: $white;
      }

      h2 {
        @media only screen and (max-width: $break-desktop) {
          color: $lehigh-brown;
          font-size: 1rem;
          font-weight: bold;
        }
      }
    }

    .hover-box-content {
      @media only screen and (max-width: $break-desktop) {
        &::after {
          font-family: $font-awesome;
          content: "\f105";
          font-size: 6rem;
          color: $blue-arrow;
          position: absolute;
          right: 10px;
          bottom: 0;
        }
      }

      p {
        padding: 0 $space-double 0 0;

        @media only screen and (min-width: $break-desktop) {
          padding: 0;
        }
      }
    }

    &:hover {
      @media only screen and (max-width: $break-desktop) {
        background-color: $grey_lightest;

        .hover-box-content {
          &::after {
            color: $grey-darkest;
          }
        }
      }
    }
  }
}

@media only screen and (max-width: $break-desktop) {
  .hover-box.card {
    .hover-box-image {
      display: none;
    }
  }
}

body.page-node-type-spotlight {
  main {
    picture {
      float: right;
      padding: $space 0 $space $space;

      @media only screen and (max-width: $break-desktop) {
        display: block;
        float: none;
        padding: 0 0 $space 0;
      }
    }
  }
}
  • URL: /components/raw/hover_box/hover_box.scss
  • Filesystem Path: components/02-pieces/04-hover_box/hover_box.scss
  • Size: 6.6 KB

No notes defined.