TyBs Patterns

Image Popup 

<div class="image-popup">
    <a class="image-popup-trigger" href="#image-popup-p1">
    <img border="0" src="../../img/unsplash/danist-LZ7-lLCRS3s-unsplash-small.jpg" alt="alt tag for the small image">
  </a>
    <div id="image-popup-p1" class="image-popup-target sibling-margins-off">
        <figure class="image-popped-image">
            <img data-lazyimage="../../img/unsplash/danist-LZ7-lLCRS3s-unsplash.jpg" alt="alt tag for the image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' /%3E">
            <figcaption class="image-caption">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</figcaption>
        </figure>
        <a href="#" class="btn btn-primary btn-close"><span class="sr-only">Close</span></a>
    </div>
</div>
 
<div class="image-popup">
  <a class="image-popup-trigger" href="#image-popup-{{image_popup_id}}">
    <img border="0" src="{{image_popup_small}}" alt="{{image_popup_small_alt}}">
  </a>
  <div id="image-popup-{{image_popup_id}}" class="image-popup-target sibling-margins-off">
    <figure class="image-popped-image">
      {{> @lazyimage }}
      <figcaption class="image-caption">{{image_caption}}</figcaption>
    </figure>
    {{render '@close--button' }}
  </div>
</div>
 
{
  "image_popup_small": "../../img/unsplash/danist-LZ7-lLCRS3s-unsplash-small.jpg",
  "image_popup_small_alt": "alt tag for the small image",
  "image_popup_id": "p1",
  "image_caption": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
  "close_href": "#_",
  "lazyimage_src": "../../img/unsplash/danist-LZ7-lLCRS3s-unsplash.jpg",
  "lazyimage_alt": "alt tag for the image"
}
  • Content: 
    .image-popup {
  a.image-popup-trigger {
    display:block;
    img {
      display:block;
      height:auto;
      width:100%;
    }
  }
  .image-popup-target {
    align-items:center;
    background-color:rgba(0,0,0,0.75);
    -webkit-backdrop-filter:blur(5px);
    backdrop-filter:blur(5px);
    color:white;
    display:flex;
    height:100%;
    justify-content:center;
    left:0;
    margin:0;
    opacity:0;
    position:fixed;
    text-align:center;
    top:0;
    transition:opacity 0.25s;
    width:100%;
    z-index:-1;
    .image-popped-image {
      display:inline-block;
      position:relative;
      transform:scale(0.9);
      transition:transform 0.25s;
      z-index:3;
    }
    img {
      border-radius:4px;
      box-shadow:0 0 1rem rgba(0,0,0,0.2);
      display:inline-block;
      max-height:60vh;
      max-width:calc(100vw - 4.5rem);
      @media (min-height:500px) {
        max-height:70vh;
      }
      @media (min-height:800px) {
        max-height:80vh;
      }
    }
    .image-caption {
      border-top:1px rgba(white,0.2) solid;
      margin:1.5rem auto 0 auto;
      max-width:45em;
      padding:1rem 2.25rem;
      text-align:left;
    }
    &:target {
      opacity:1;
      outline:none;
      visibility:visible;
      z-index:999;
      .image-popped-image {
        transform:scale(1);
      }
    }
    .btn-close {
      position:absolute;
      right:1rem;
      top:1rem;
      z-index:5;
    }
  }
}
  • URL: /components/raw/image-popup/image-popup.scss
  • Filesystem Path: source/patterns/molecules/image-popup/image-popup.scss
  • Size: 1.5 KB

There are no notes for this item.