<div id="borderBubble" class="circle circle-overlay look">
    <img class='img--bg layer-1' src="https://i.cbc.ca/1.3366120.1450550267!/fileImage/httpImage/image.jpg_gen/derivatives/16x9_780/toronto-starbucks-alcohol.jpg" alt="this is an image alt">
    <div class="tint show-on-hover layer-2">
        <div class="quote ">
            <h3>#Another Campaign</h3>
            <p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.”</p>
            <div class="socials">
                <a href="https://twitter.com/intent/tweet?url=www.starbucks.ca&text=This%20is%20a%20tween&via=starbsCAnada&hashtags=duck,bird,quack,egg,dingo" target="_blank" rel="noopener">
    <i class="fab fa-twitter"></i>
  </a>
                <div class="facebook-share" data-quote="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed." data-hashtag="Fun">
                    <i class="fab fa-facebook"></i>
                </div>
                <div href="" class="copy-clipboard">
                    <input type="text" class='target' value="www.starbucks.ca/responsibility#cool">
                    <i class="fas fa-link"></i>
                    <span class="tooltiptext">Link Copied</span>
                </div>
                <a href="mailto:someone@theirmail.com?subject=The%20email%20subject&body=the%20email%20body">
    <i class="fas fa-envelope"></i>
  </a>
            </div>
            <a href="https://www.youtube.com/watch?v=w2LaeleCIs4" data-lity class="dp-n dp-lg-b"><button>Jill&#x27;s story</button></a>
            <a href="https://www.youtube.com/watch?v=w2LaeleCIs4" target="_blank" class="dp-nb dp-lg-n"><button>Jill&#x27;s story</button></a>
        </div>
        <div class="block"></div>
    </div>
    <svg class="hide-on-hover tap layer-2 dp-lg-n">
    <use xlink:href="#icon-click" />
  </svg>''
</div>
<div id="borderBubble" class="circle circle-overlay look">
  <img class='img--bg layer-1' src="{{bigBubbleBottom.previewImg}}" alt="{{bigBubbleBottom.previewAlt}}">
  <div class="tint show-on-hover layer-2">
    {{render '@quote--video' bigBubbleBottom merge=true}}
      <div class="block"></div>
  </div>
  <svg class="hide-on-hover tap layer-2 dp-lg-n">
    <use xlink:href="#icon-click" />
  </svg>''
</div>
{
  "bigBubbleTop": {
    "previewImg": "https://vrteje8p14-flywheel.netdna-ssl.com/wp-content/uploads/2015/05/Coffee_Cherries.jpg",
    "previewAlt": "this is an image alt",
    "slideTitle": "#Campaign",
    "partnerName": "Rebecca",
    "partnerLocation": "Labrador",
    "partnerQuote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.",
    "youTubeId": "w2LaeleCIs4",
    "speedValue": 2.2,
    "socialBar": {
      "id": "cool",
      "twitter": {
        "url": "www.starbucks.ca",
        "text": "This is a tween",
        "via": "starbsCAnada",
        "hashtag-1": "duck",
        "hashtag-2": "bird",
        "hashtag-3": "quack",
        "hashtag-4": "egg",
        "hashtag-5": "dingo"
      },
      "facebook": {
        "quote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.",
        "hashtag": "Fun"
      },
      "email": {
        "subject": "The email subject",
        "body": "the email body"
      }
    }
  },
  "bigBubbleBottom": {
    "previewImg": "https://i.cbc.ca/1.3366120.1450550267!/fileImage/httpImage/image.jpg_gen/derivatives/16x9_780/toronto-starbucks-alcohol.jpg",
    "previewAlt": "this is an image alt",
    "slideTitle": "#Another Campaign",
    "partnerName": "Rachana",
    "partnerLocation": "Kamloops",
    "partnerQuote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.",
    "youTubeId": "w2LaeleCIs4",
    "speedValue": 2.5,
    "socialBar": {
      "id": "cool",
      "twitter": {
        "url": "www.starbucks.ca",
        "text": "This is a tween",
        "via": "starbsCAnada",
        "hashtag-1": "duck",
        "hashtag-2": "bird",
        "hashtag-3": "quack",
        "hashtag-4": "egg",
        "hashtag-5": "dingo"
      },
      "facebook": {
        "quote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.",
        "hashtag": "Fun"
      },
      "email": {
        "subject": "The email subject",
        "body": "the email body"
      }
    }
  }
}
  • Content:
    .circle-overlay {
      position: relative;
      transition:
        opacity 250ms ease-out,
        border-width 250ms ease-in-out;
      $size: 227px;
      width: $size;
      height: $size;
    
      .tap {
        $size: 30px;
        position: absolute;
        bottom: 25px;
        left: calc(50% - 15px);
        width: $size;
        height: $size;
      }
    
      .show-on-hover {
        .block {
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          width: 100%;
          z-index: 20;
          transition: z-index 300ms ease-out;
        }
    
        opacity: 0;
      }
    
      &:hover .show-on-hover {
    
    
        opacity: 1;
    
        .block {
          z-index: -1;
        }
      }
    
      .quote {
        padding: 35px;
        justify-content: space-evenly;
    
        h3 {
          margin-bottom: 12px;
          width: 70%;
          font-size: 16px;
        }
    
        .strong {
          margin: 2px 0;
          font-size: 6px;
        }
    
        p {
          margin: 0;
          line-height: 20px;
          font-size: 12px;
        }
    
        button {
          font-size: 8.96px;
        }
    
        .socials {
          max-width: 70%;
    
          svg {
            width: 10px;
            height: 10px;
          }
        }
      }
    
    
      &.look.fake-hover {
        .tint {
          display: block;
          animation: fade 5s cubic-bezier(.36, .07, .19, .97) both;
        }
    
        &:hover {
          display: block;
        }
      }
    
      &.green-border {
        box-sizing: content-box;
        border: 15px solid $green;
    
      }
    
      @keyframes fade {
        50% {
          opacity: 1;
        }
      }
    
      @include respond-above(md) {
        $size: 350px;
        width: $size;
        height: $size;
        min-width: $size;
        min-height: $size;
    
        .tap {
          $size: 40px;
          left: calc(50% - 20px);
          width: $size;
          height: $size;
        }
    
    
        .quote {
          padding: 45px 25px 30px;
    
          p {
            max-width: 275px;
          }
    
          button {
            font-size: 8.96px;
          }
        }
    
      }
    
      @include respond-above(lg) {
    
        .tint,
        .show-on-hover {
          display: block;
          opacity: 1;
        }
    
        .quote {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
    
    
          h3 {
            max-width: 200px;
            margin: 0;
            width: 75%;
            font-size: 22px;
          }
    
          .strong {
            margin: 10px 0 0;
            font-size: 14px;
          }
    
          p {
            margin: 0;
            font-size: 16px;
            width: 75%;
          }
    
          button {
            font-size: 17.92px;
          }
    
          .socials {
            max-width: 50%;
    
            svg {
              width: 13px;
              height: 13px;
            }
          }
        }
      }
    }
  • URL: /components/raw/circle-overlay/_circle-overlay.scss
  • Filesystem Path: structures/03-organisms/circle-overlay/_circle-overlay.scss
  • Size: 2.4 KB

There are no notes for this item.