JSFiddle - React, Tailwind, and code Playground

HTML

<div id="lightbox-container">
  <div id="lightbox-image"><img src=' '></div>
  <div id="lightbox-overlay"></div>
</div>
<div class="article-text"><p><p>kontent postu</p>
<p><a href="http://img.cda.pl/obr/oryginalne/850ca7d90566b9ed82c60d9d50771230.jpg"><img class=" size-medium wp-image-7 alignleft" src="http://img.cda.pl/obr/oryginalne/850ca7d90566b9ed82c60d9d50771230.jpg" alt="1392598023212" width="284" height="300" /></a></p>
</p></div>

CSS

#lightbox-container{
	top: 0%;
  left: 0%;
	position: fixed;
	display: none;
	width: 100%;
  height: 100%;	
	z-index: 2;
	text-align: center;	
}
#lightbox-image{		
	display: inline;
	position: relative;	
	z-index: 4;
	top: 50%;	
}
#lightbox-image img{			
	width: auto;
    height: auto;
	max-width: 85%;
	max-height: 85%;	
	transform: translateY(-50%);
}
#lightbox-overlay{
    display: inline;
	position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 3;
    -moz-opacity: 0.8;
    opacity: 0.8;
    filter: alpha(opacity=80);	
    
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

JavaScript

$('.article-text').children('img').click(function(event){
    if( event.which == 1 ){
      event.preventDefault();
      var img = $(this).parent().attr('href');    
      $('#lightbox-image').children().attr("src", img);    
      $('#lightbox-container').fadeIn(400);
    }
  });

  $('#lightbox-overlay').click(function(){
    $('#lightbox-container').fadeOut(400);    
  });