arrow_back
View code

<section id="overlay-section">
  <div class="overlay-container">
    <div class="overlay">
      <div class="overlay-content card-1">
        <div class="img">
          <img src="/assets/images/2a.jpg" alt="">
        </div>
        <div class="back-button">
          <svg width="77" height="23" viewBox="0 0 77 23" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M38.71 4.238V17H43.174C45.514 17 47.116 15.542 47.116 13.526C47.116 12.104 46.27 10.808 44.812 10.448C45.928 10.034 46.72 9.062 46.72 7.694C46.72 5.678 45.298 4.238 42.868 4.238H38.71ZM40.474 9.818V5.786H42.598C44.056 5.786 44.938 6.578 44.938 7.784C44.938 8.972 44.092 9.818 42.67 9.818H40.474ZM40.474 15.452V11.33H42.994C44.542 11.33 45.316 12.194 45.316 13.418C45.316 14.66 44.344 15.452 42.922 15.452H40.474ZM48.8838 14.678C48.8838 16.046 50.0178 17.27 51.7818 17.27C53.3298 17.27 54.1938 16.442 54.5718 15.83C54.5718 16.46 54.6258 16.784 54.6618 17H56.3178C56.2818 16.784 56.2098 16.334 56.2098 15.578V11.24C56.2098 9.548 55.2018 8.072 52.6098 8.072C50.7378 8.072 49.2438 9.224 49.0638 10.88L50.6838 11.258C50.7918 10.25 51.4578 9.512 52.6458 9.512C53.9598 9.512 54.5178 10.214 54.5178 11.06C54.5178 11.366 54.3738 11.636 53.8518 11.708L51.5118 12.05C50.0178 12.266 48.8838 13.13 48.8838 14.678ZM52.0158 15.848C51.1518 15.848 50.6118 15.236 50.6118 14.588C50.6118 13.814 51.1518 13.4 51.8718 13.292L54.5178 12.896V13.292C54.5178 15.182 53.4018 15.848 52.0158 15.848ZM62.6617 9.638C64.1377 9.638 64.7677 10.628 64.9837 11.474L66.5137 10.826C66.1537 9.512 64.9657 8.072 62.6617 8.072C60.1957 8.072 58.3057 9.962 58.3057 12.662C58.3057 15.29 60.1597 17.27 62.6797 17.27C64.9297 17.27 66.1717 15.812 66.5857 14.57L65.0917 13.922C64.8937 14.606 64.2997 15.704 62.6797 15.704C61.2757 15.704 60.0337 14.642 60.0337 12.662C60.0337 10.646 61.2937 9.638 62.6617 9.638ZM76.3428 8.342H74.0028L70.2588 12.176V3.968H68.5848V17H70.2588V14.39L71.4648 13.184L74.2908 17H76.4148L72.6528 11.996L76.3428 8.342Z" fill="var(--color-lowest)"></path>
            <path d="M12.2633 1L2.20418 11.5L12.2633 22" stroke="var(--color-lowest)" stroke-width="2"></path>
            <path d="M2 11.4971L23 11.4971" stroke="var(--color-lowest)" stroke-width="2"></path>
          </svg>
        </div>
        <div class="details">
          <div class="title">
            <h1 class="font-normal text-md">
              Card title comes here
            </h1>
          </div>
          <div class="content margin-top-lg text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
            commodi iusto architecto cupiditate illo ad pariatur eos laboriosam, aut itaque repellat? Quisquam minima
            dolorum temporibus.
            <div class="margin-top-md">
              Ut libero doloribus temporibus quo, velit pariatur perferendis tempore itaque,
              praesentium consequuntur labore corrupti, amet recusandae illum. Ipsum mollitia voluptate repudiandae
              aperiam ipsa repellat in veniam voluptates nam sequi a minima reprehenderit, nulla eius sint dolore facere
              molestiae non soluta saepe expedita tenetur maiores? Nisi incidunt quisquam sed odit asperiores
              voluptatum, aspernatur cumque, voluptas sunt ipsum esse. Dolore aliquid, magnam commodi quae magni
              possimus explicabo, officiis quidem esse rem cupiditate harum voluptates modi, molestiae et?
            </div>
          </div>
        </div>
      </div>
      <div class="overlay-content card-2">
        <div class="img">
          <img src="/assets/images/1a.jpg" alt="">
        </div>
        <div class="back-button">
          <svg width="77" height="23" viewBox="0 0 77 23" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M38.71 4.238V17H43.174C45.514 17 47.116 15.542 47.116 13.526C47.116 12.104 46.27 10.808 44.812 10.448C45.928 10.034 46.72 9.062 46.72 7.694C46.72 5.678 45.298 4.238 42.868 4.238H38.71ZM40.474 9.818V5.786H42.598C44.056 5.786 44.938 6.578 44.938 7.784C44.938 8.972 44.092 9.818 42.67 9.818H40.474ZM40.474 15.452V11.33H42.994C44.542 11.33 45.316 12.194 45.316 13.418C45.316 14.66 44.344 15.452 42.922 15.452H40.474ZM48.8838 14.678C48.8838 16.046 50.0178 17.27 51.7818 17.27C53.3298 17.27 54.1938 16.442 54.5718 15.83C54.5718 16.46 54.6258 16.784 54.6618 17H56.3178C56.2818 16.784 56.2098 16.334 56.2098 15.578V11.24C56.2098 9.548 55.2018 8.072 52.6098 8.072C50.7378 8.072 49.2438 9.224 49.0638 10.88L50.6838 11.258C50.7918 10.25 51.4578 9.512 52.6458 9.512C53.9598 9.512 54.5178 10.214 54.5178 11.06C54.5178 11.366 54.3738 11.636 53.8518 11.708L51.5118 12.05C50.0178 12.266 48.8838 13.13 48.8838 14.678ZM52.0158 15.848C51.1518 15.848 50.6118 15.236 50.6118 14.588C50.6118 13.814 51.1518 13.4 51.8718 13.292L54.5178 12.896V13.292C54.5178 15.182 53.4018 15.848 52.0158 15.848ZM62.6617 9.638C64.1377 9.638 64.7677 10.628 64.9837 11.474L66.5137 10.826C66.1537 9.512 64.9657 8.072 62.6617 8.072C60.1957 8.072 58.3057 9.962 58.3057 12.662C58.3057 15.29 60.1597 17.27 62.6797 17.27C64.9297 17.27 66.1717 15.812 66.5857 14.57L65.0917 13.922C64.8937 14.606 64.2997 15.704 62.6797 15.704C61.2757 15.704 60.0337 14.642 60.0337 12.662C60.0337 10.646 61.2937 9.638 62.6617 9.638ZM76.3428 8.342H74.0028L70.2588 12.176V3.968H68.5848V17H70.2588V14.39L71.4648 13.184L74.2908 17H76.4148L72.6528 11.996L76.3428 8.342Z" fill="var(--color-lowest)"></path>
            <path d="M12.2633 1L2.20418 11.5L12.2633 22" stroke="var(--color-lowest)" stroke-width="2"></path>
            <path d="M2 11.4971L23 11.4971" stroke="var(--color-lowest)" stroke-width="2"></path>
          </svg>
        </div>
        <div class="details">
          <div class="title">
            <h1 class="font-normal text-md">
              Card title comes here
            </h1>
          </div>
          <div class="content margin-top-lg text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
            commodi iusto architecto cupiditate illo ad pariatur eos laboriosam, aut itaque repellat? Quisquam minima
            dolorum temporibus. Ut libero doloribus temporibus quo, velit pariatur perferendis tempore itaque,
            praesentium consequuntur labore corrupti, amet recusandae illum. Ipsum mollitia voluptate repudiandae
            aperiam ipsa repellat in veniam voluptates nam sequi a minima reprehenderit, nulla eius sint dolore facere
            molestiae non soluta saepe expedita tenetur maiores?
            <div class="margin-top-md">
              Nisi incidunt quisquam sed odit asperiores
              voluptatum, aspernatur cumque, voluptas sunt ipsum esse. Dolore aliquid, magnam commodi quae magni
              possimus explicabo, officiis quidem esse rem cupiditate harum voluptates modi, molestiae et?
            </div>
          </div>
        </div>
      </div>
      <div class="overlay-content card-3">
        <div class="img">
          <img src="/assets/images/3a.jpg" alt="">
        </div>
        <div class="back-button">
          <svg width="77" height="23" viewBox="0 0 77 23" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M38.71 4.238V17H43.174C45.514 17 47.116 15.542 47.116 13.526C47.116 12.104 46.27 10.808 44.812 10.448C45.928 10.034 46.72 9.062 46.72 7.694C46.72 5.678 45.298 4.238 42.868 4.238H38.71ZM40.474 9.818V5.786H42.598C44.056 5.786 44.938 6.578 44.938 7.784C44.938 8.972 44.092 9.818 42.67 9.818H40.474ZM40.474 15.452V11.33H42.994C44.542 11.33 45.316 12.194 45.316 13.418C45.316 14.66 44.344 15.452 42.922 15.452H40.474ZM48.8838 14.678C48.8838 16.046 50.0178 17.27 51.7818 17.27C53.3298 17.27 54.1938 16.442 54.5718 15.83C54.5718 16.46 54.6258 16.784 54.6618 17H56.3178C56.2818 16.784 56.2098 16.334 56.2098 15.578V11.24C56.2098 9.548 55.2018 8.072 52.6098 8.072C50.7378 8.072 49.2438 9.224 49.0638 10.88L50.6838 11.258C50.7918 10.25 51.4578 9.512 52.6458 9.512C53.9598 9.512 54.5178 10.214 54.5178 11.06C54.5178 11.366 54.3738 11.636 53.8518 11.708L51.5118 12.05C50.0178 12.266 48.8838 13.13 48.8838 14.678ZM52.0158 15.848C51.1518 15.848 50.6118 15.236 50.6118 14.588C50.6118 13.814 51.1518 13.4 51.8718 13.292L54.5178 12.896V13.292C54.5178 15.182 53.4018 15.848 52.0158 15.848ZM62.6617 9.638C64.1377 9.638 64.7677 10.628 64.9837 11.474L66.5137 10.826C66.1537 9.512 64.9657 8.072 62.6617 8.072C60.1957 8.072 58.3057 9.962 58.3057 12.662C58.3057 15.29 60.1597 17.27 62.6797 17.27C64.9297 17.27 66.1717 15.812 66.5857 14.57L65.0917 13.922C64.8937 14.606 64.2997 15.704 62.6797 15.704C61.2757 15.704 60.0337 14.642 60.0337 12.662C60.0337 10.646 61.2937 9.638 62.6617 9.638ZM76.3428 8.342H74.0028L70.2588 12.176V3.968H68.5848V17H70.2588V14.39L71.4648 13.184L74.2908 17H76.4148L72.6528 11.996L76.3428 8.342Z" fill="var(--color-lowest)"></path>
            <path d="M12.2633 1L2.20418 11.5L12.2633 22" stroke="var(--color-lowest)" stroke-width="2"></path>
            <path d="M2 11.4971L23 11.4971" stroke="var(--color-lowest)" stroke-width="2"></path>
          </svg>
        </div>
        <div class="details">
          <div class="title">
            <h1 class="font-normal text-md">
              Card title comes here
            </h1>
          </div>
          <div class="content margin-top-lg text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
            commodi iusto architecto cupiditate illo ad pariatur eos laboriosam, aut itaque repellat? Quisquam minima
            dolorum temporibus. Ut libero doloribus temporibus quo, velit pariatur perferendis tempore itaque,
            praesentium consequuntur labore corrupti, amet recusandae illum.
            <div class="margin-top-md">
              Ipsum mollitia voluptate repudiandae
              aperiam ipsa repellat in veniam voluptates nam sequi a minima reprehenderit, nulla eius sint dolore facere
              molestiae non soluta saepe expedita tenetur maiores? Nisi incidunt quisquam sed odit asperiores
              voluptatum, aspernatur cumque, voluptas sunt ipsum esse. Dolore aliquid, magnam commodi quae magni
              possimus explicabo, officiis quidem esse rem cupiditate harum voluptates modi, molestiae et?
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
  <div class="cdt-container">
    <div class="cdt-row margin-top-xlg">
      <div class="cdt-4">
        <div class="card is-link">
          <a href="#card-1">
            <figure>
              <img src="/assets/images/2a.jpg" alt="Card preview img">
            </figure>
            <div class="card-content">
              <h4 class="headline">Card title comes here</h4>
              <p class="color-mid">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum placeat
                eum molestiae accusamus magni et expedita rerum veritatis quia consequatur!</p>
            </div>
          </a>
        </div>
      </div>
      <div class="cdt-4">
        <div class="card is-link">
          <a href="#card-2">
            <figure>
              <img src="/assets/images/1a.jpg" alt="Card preview img">
            </figure>
            <div class="card-content">
              <h4 class="headline">Card title comes here</h4>
              <p class="color-mid">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum placeat
                eum molestiae accusamus magni et expedita rerum veritatis quia consequatur!</p>
            </div>
          </a>
        </div>
      </div>
      <div class="cdt-4">
        <div class="card is-link">
          <a href="#card-3">
            <figure>
              <img src="/assets/images/3a.jpg" alt="Card preview img">
            </figure>
            <div class="card-content">
              <h4 class="headline">Card title comes here</h4>
              <p class="color-mid">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum placeat
                eum molestiae accusamus magni et expedita rerum veritatis quia consequatur!</p>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>
                        
Copy HTML

/*
 * File: _card-overlay-detail.scss
 * Location /src/scss/components
 * Card overlay detail component
 */

:root {
    --card-picture-height: 200px;
    --card-margin-bottom: 1em;
}

.overlay-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 16;
    background-color: var(--color-highest);
    width: 100%;
    overflow: auto;
    display: none;
    &.show {
        display: block;
    }
    .img {
        width: 50%;
        height: 100vh;
        position: fixed;
        left: 0;
        @media screen and (max-width: 1024px) {
            position: relative;
            width: 100%;
            height: inherit;
        }
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .overlay-content {
        flex-flow: row;
        display: none;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        position: relative;
        top: 0px;
        left: 0px;
        &.show {
            display: block;
        }
    }
    .back-button {
        position: absolute;
        left: 50%;
        top: 90px;
        margin: 0;
        margin-left: 116px;
        cursor: pointer;
        @media screen and (max-width: 1024px) {
            position: absolute;
            top: 20px;
            left: 20px;
            margin: 0;
            float: none;
            z-index: 10;
        }
    }
    .title h1 {
        color: var(--color-white);
    }
    .details {
        color: var(--color-lowest);
        width: 50%;
        padding: 0 60px;
        padding-left: 116px;
        padding-top: 185px;
        padding-bottom: 40px;
        margin-left: 50%;
        max-width: 750px;
        @media screen and (max-width: 1024px) {
            margin: 0;
            width: 100%;
            padding: 80px 60px;
            max-width: 100%;
        }
    }
}
                        
Copy SCSS

/*
 * File: card-overlay-detail.js
 * Location /src/js/components
 * Card overlay detail component
*/

document.querySelectorAll(".overlay-container").forEach((overlayContainer) => {
  overlayContainer.querySelectorAll(".back-button").forEach((backBtn) => {
    backBtn.addEventListener("click", () =>
      overlayContainer.classList.remove("show")
    );
  });
  document.querySelectorAll(".card").forEach((card) => {
    card.addEventListener("click", () => {
      overlayContainer.classList.add("show");
      const target = card
        .querySelector("a")
        .getAttribute("href")
        .replace("#", "");
      console.log(target);
      overlayContainer
        .querySelectorAll(".overlay-content")
        .forEach((oc) => oc.classList.remove("show"));
      overlayContainer.querySelector(`.${target}`).classList.add("show");
    });
  });
});

Copy JS
Upgrade to professional version

Using professional version, you will have unlimited number of projects and unlimited access to materials in Kodhus.com.

call_split
Dependency

In order to use this component, make sure to include the scss and js of following components:

Ok