JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 <div id="moreinfo">
   <a href="#" id="closegall">x</a>
   <div id="details"></div>
</div>

    <div class="row">   
        <div class="col-md-6">
        
            <div class="portfoliotile">
                <img src="http://dummyimage.com/140/a3a3a3/ff0048.png" alt="thumb" class="trigger"/>
                <div class="description">
                	<h3>Title</h3>
                	<p>Project decription goes right here.<p>
                </div>
            </div>
            
            <div class="portfoliotile">
                 <img src="http://dummyimage.com/140/a3a3a3/ff0048.png" alt="thumb" class="trigger"/>
                <div class="description">
                	<h3>Title</h3>
                	<p>Loremipsum dolor sit amet consequtur</p>
                </div>
        	</div>
     
     </div>
        
</div>

CSS

.hidden {
    visibility: hidden;
    display:none;
}

.portfoliotile {
    border: 1px solid black;
    padding: 4px;
    margin: 20px;
    background-color: red;
    text-align: center;
}

#moreinfo {
    border: 1px solid black;
    padding: 4px;
    margin: 0 auto 20px auto;
    background-color: yellow;
    text-align: center;
}

.active {
   opacity:0.6;
}

JavaScript

$( document ).ready(function() {

	$('body').click(function() {
	   $('#moreinfo').addClass('hidden');
	   $('.trigger').parent().removeClass('active');
	});

    $('#moreinfo').addClass('hidden');
    $('.portfoliotile .description').addClass('hidden');
    
    $('.trigger').click(function(e){
    	e.stopPropagation();
        $('#moreinfo').removeClass('hidden');
        $(this).parent().addClass('active');
        $('#details').html($(this).parent().find('.description').html());

    });
    
    $('#closegall').click(function(){
        $('#moreinfo').addClass('hidden');
        $('.portfoliotile').removeClass('dark');
    });
    

});