JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<h2 class="section-title">
	<span id="production">Продукция</span>
</h2>
<div class="container">
	<div class="novelty-list">
		<div class="item-box">
			<div class="img-box">
				<div class="img">
					<img src="https://dummyimage.com/100x100/969696/000000.png">
				</div>
			</div>
			<div class="title-box">
				<div class="align-m">
					<span class="title">Хлебцы острые</span>
				</div>
			</div>
			<div class="backing"></div>
		</div>
		<div class="item-box">
			<div class="img-box">
				<div class="img">
					<img src="https://dummyimage.com/100x100/969696/000000.png">
				</div>
			</div>
			<div class="title-box">
				<div class="align-m">
					<span class="title">Хлебцы зерновые с тмином</span>
				</div>
			</div>
			<div class="backing"></div>
		</div>
	</div>
</div>
<div id="pop-up">
	<div class="popup-content">blabla</div>
</div>

CSS

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}
/*стили выше добавлены только для этого примера, в реальном проекте используйте normilize.css\reset.css*/
#pop-up{	
  position: absolute;
	z-index: 99;
  top: 50%;
  left: 50%;
	transform: translate(-50%,-50%);
  height: 50vh;
  width: 50vw;
	border: 2px solid #000;
	background: lightgray;
}

JavaScript

$( document ).ready(function() {
	$('#pop-up').hide();
	$('.img').click(function () {
		$('#pop-up').show();
		$('.popup-content').text($(this).parent().next('.title-box').text());
	});
	$('#pop-up').click(function () {
		$('#pop-up').hide();
	});
});