JSFiddle - React, Tailwind, and code Playground

by oduska

HTML

<div class="preview">
    <img src="http://i.imgur.com/BmGCbTd.jpg">
    <button class="close">
        X
    </button>
</div>

<p>
    <a href="#" class="preview-link">CLICK ME</a>
</p>

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut tellus commodo, ullamcorper lectus eu, posuere metus. Nulla finibus, nulla sed scelerisque rhoncus, orci tortor cursus lectus, quis pharetra diam ex id risus. Mauris venenatis sed metus ut tempus. Nulla lacinia iaculis ante sed egestas. Nam vitae venenatis est. Donec vitae posuere eros. Fusce vitae ultricies sem.
</p>

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut tellus commodo, ullamcorper lectus eu, posuere metus. Nulla finibus, nulla sed scelerisque rhoncus, orci tortor cursus lectus, quis pharetra diam ex id risus. Mauris venenatis sed metus ut tempus. Nulla lacinia iaculis ante sed egestas. Nam vitae venenatis est. Donec vitae posuere eros. Fusce vitae ultricies sem.
</p>

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut tellus commodo, ullamcorper lectus eu, posuere metus. Nulla finibus, nulla sed scelerisque rhoncus, orci tortor cursus lectus, quis pharetra diam ex id risus. Mauris venenatis sed metus ut tempus. Nulla lacinia iaculis ante sed egestas. Nam vitae venenatis est. Donec vitae posuere eros. Fusce vitae ultricies sem.
</p>

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut tellus commodo, ullamcorper lectus eu, posuere metus. Nulla finibus, nulla sed scelerisque rhoncus, orci tortor cursus lectus, quis pharetra diam ex id risus. Mauris venenatis sed metus ut tempus. Nulla lacinia iaculis ante sed egestas. Nam vitae venenatis est. Donec vitae posuere eros. Fusce vitae ultricies sem.
</p>

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut tellus commodo, ullamcorper lectus eu, posuere metus. Nulla finibus, nulla sed scelerisque rhoncus, orci tortor cursus lectus, quis pharetra diam ex...

SCSS

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
}

.preview {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.8);
    
    img {
        width: calc(100% - 8em);
        height: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .close {
        font-weight: bold;
        border: 0;
        text-align: center;
        border-radius: 50%;
        height: 3em;
        width: 3em;
        cursor: pointer;
        position: absolute;
        top: 1em;
        right: 1em;
    }
}

JavaScript

$('.preview-link').click(function(){
	$('.preview').fadeIn();
});

$('.preview').click(function(){
	$(this).fadeOut();
}).children('img').click(function(e) {
	return false;
});