Cacher is the code snippet organizer for pro developers

html,body { margin: 0; padding: 100px 0; background-color: #00ffc4; }
.no-scroll { overflow: hidden; }
h3, h4 { padding: 0; margin: 0; }

a { text-decoration: none; color: #00ffc4; }
a:hover { color: #00bc91; }

.item { width: 500px; max-width: 100%;  background-color: #fff; padding: 20px; margin: 0 auto; border-radius: 5px; }

.item figure { width: 100%; margin: 0 0 20px; }

.item figure img { width: 100%; }

.item-info { padding: 0 20px 40px; font-size: 20px; }

.item-info h4 { font-size: 30px; }

.item-info .date { font-size: 16px; color: gray; text-transform: uppercase; font-weight: 500; }

.item-info header { margin-bottom: 40px; }

.modal-open { overflow: hidden; }

.lightbox { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 100; background-color: rgba(0,0,0,0.5); padding: 100px 10px; display: none; overflow: auto; box-sizing: border-box; }

.popup-modal { position: relative; margin: 0 auto; display: none; }

.popup-modal .close { position: absolute; display: block; width: 16px; height: 16px; top: 10px; right: 10px; background-color: transparent; padding: 0; transform: rotate(45deg); border: 0; font-size: 0; cursor: pointer; }

.popup-modal .close:before { position: absolute; width: 100%; height: 2px; top: 50%; left: 0; margin-top: -1px; background-color: #000; content: ''; }

.popup-modal .close:after { position: absolute; width: 100%; height: 2px; top: 50%; left: 0; margin-top: -1px; background-color: #000; transform :rotate(90deg); content: ''; }

.popup-modal .close:hover::before { background-color: #00ffc4; }

.popup-modal .close:hover::after { background-color: #00ffc4; }

.post-popup { width: 100%; max-width: 650px; background-color: #fff; box-shadow: 0 7px 8px rgba(0,0,0,0.25); padding: 20px 30px; }

.popup-header { font-size: 16px; margin-bottom: 40px; }

.popup-header h3 { color: #00ffc4; font-size: 36px; margin-bottom: 0; }

.popup-header p { font-weight: 500; letter-spacing: 0.64px; margin-bottom: 10px; color: gray; }

.post-popup figure { width: 100%; margin: 0; margin-bottom: 20px; 
  img { width: 100%; }
}

.popup-header .popup-main { font-size: 20px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

jQuery(function($){
    // Lightbox Triggers
    lightboxTrigger(".open-popup-link", ".no-scroll");
});

function lightboxTrigger(link, object) {
    var target = $(".open-popup-link").attr("href");
    $(link).on("click", function(event) {
        event.preventDefault();
        $(target).wrap( "<div class='lightbox'></div>" );
        $(".lightbox").fadeIn(300, function() {
            $(target).fadeIn(0);
            $("body").addClass("no-scroll");
        });
    
        $("body").on("click", function(event) {
            if(($(event.target).hasClass("lightbox") || $(event.target).hasClass("close")) && $(target).parent().hasClass("lightbox") ) {
                $(".lightbox").fadeOut(300, function() {
                    $(target).hide(0);
                    $(target).unwrap();
                });
                $("body").removeClass("no-scroll");
            }
        });
    });
}

<article class="item">
    <figure>
        <a href="#post-popup" class="open-popup-link"><img src="http://www.unsplash.it/460/306?image=648" alt=""></a>
    </figure>
    <div class="item-info">
      <header>
        <h4><a href="#post-popup" class="open-popup-link">Item Title</a></h4>
        <span class="date">July 10, 2017</span>
      </header>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquet risus non quam finibus, ac rhoncus lectus tempus. Morbi rutrum, eros maximus vestibulum suscipit, eros est sodales lectus, et blandit diam enim eget dolor. Integer sollicitudin, mauris auctor fringilla dictum, ante nibh laoreet libero, ullamcorper ultricies metus lacus faucibus justo. Praesent gravida ut ipsum porta fermentum...</p>
        <a href="#post-popup" class="link open-popup-link">View More</a>
    </div>
</article>

<div id="post-popup" class="post-popup popup-modal">
    <button class="close">x</button>
    <div class="popup-header">
      <h3>Popup Title</h3>
      <p>Popup Subtitle</p>
    </div>
    <figure>
      <img src="http://www.unsplash.it/650/380?image=648">
    </figure>
    <div class="popup-main">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquet risus non quam finibus, ac rhoncus lectus tempus. Morbi rutrum, eros maximus vestibulum suscipit, eros est sodales lectus, et blandit diam enim eget dolor. Integer sollicitudin, mauris auctor fringilla dictum, ante nibh laoreet libero, ullamcorper ultricies metus lacus faucibus justo. Praesent gravida ut ipsum porta fermentum. In cursus, augue at placerat hendrerit, odio arcu interdum tortor, ac tincidunt eros ante et velit. Cras sit amet metus placerat, sagittis tortor bibendum, pulvinar nunc. Nam rhoncus nunc at quam faucibus mattis. Phasellus vestibulum a tortor eget gravida. Nunc metus nulla, convallis non sapien ac, ullamcorper tempor erat.</p>

<p>Sed ac semper risus. Pellentesque non lacus accumsan, hendrerit ipsum eget, gravida justo. Nulla id libero enim. Sed quis tortor quis mauris laoreet gravida. Donec faucibus nunc at nibh ornare, vel pulvinar dui pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed bibendum vehicula efficitur. Nunc at ipsum vitae erat consequat vehicula.</p>

<p>Fusce scelerisque, massa ac dapibus elementum, eros erat tristique mi, sed sodales tellus ipsum sit amet tortor. Mauris congue libero eu metus bibendum elementum. Integer nec ultricies libero. Maecenas iaculis, magna id ultricies imperdiet, nisi felis eleifend turpis, sit amet vestibulum nisi odio non sapien. Sed rutrum, neque sed commodo auctor, massa lorem rhoncus nunc, at scelerisque risus libero consequat odio. In hac habitasse platea dictumst. Proin eget placerat diam, vulputate consequat lorem. Nulla luctus quam arcu. Pellentesque hendrerit quis turpis in lobortis. Mauris lorem nibh, egestas sit amet ullamcorper sed, finibus sed diam.

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