JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="desc"></div>
</div>
<div class="image_cart">
<img src="http://r.ddmcdn.com/w_830/s_f/o_1/cx_98/cy_0/cw_640/ch_360/APL/uploads/2015/07/cecil-AP463227356214-1000x400.jpg" descSelector="#somedesc" alt="No image" class="img-2" />
<div class="description hidden">
<h3>Лев</h3>
<p>Вид хищных млекопитающих, один из четырёх представителей рода пантер, относящегося к подсемейству больших кошек в составе семейства кошачьих. Наряду с тигром — самая крупная из ныне живущих кошек, масса некоторых самцов может достигать 250 кг.</p>
</div>
</div>
<div class="image_cart">
<img src="http://r.ddmcdn.com/w_830/s_f/o_1/cx_98/cy_0/cw_640/ch_360/APL/uploads/2015/07/cecil-AP463227356214-1000x400.jpg" descSelector="#somedesc" alt="No image" class="img-3" />
<div class="description hidden">
<h3>Барс</h3>
<p>Бла-бла-бла</p>
</div>
</div>
<div class="image_cart">
<img src="http://r.ddmcdn.com/w_830/s_f/o_1/cx_98/cy_0/cw_640/ch_360/APL/uploads/2015/07/cecil-AP463227356214-1000x400.jpg" descSelector="#somedesc" alt="No image" class="img-4" />
<div class="description hidden">
<h3>Тигр</h3>
<p>Бла-бла-бла</p>
</div>
</div>
<div class="image_cart">
<img src="http://r.ddmcdn.com/w_830/s_f/o_1/cx_98/cy_0/cw_640/ch_360/APL/uploads/2015/07/cecil-AP463227356214-1000x400.jpg" descSelector="#somedesc" alt="No image" class="img-5" />
<div class="description hidden">
<h3>Пума</h3>
<p>Бла-бла-бла</p>
</div>
</div>
<div id="somedesc" class="hidden">
<p><b>Лев</b></p>Вид хищных млекопитающих, один из четырёх представителей рода пантер, относящегося к подсемейству больших кошек в составе семейства кошачьих. Наряду с тигром — самая крупная из ныне живущих кошек, масса некоторых самцов может достигать
250 кг.</div>
CSS
.image_cart {
display: block;
}
.image_cart img {
width: 100%;
max-width: 150px;
height: 100%;
object-fit: cover;
}
.image_cart:not(.active) .description {
display: none;
font-size: x-large;
text-align: center;
}
/* .image_cart:not(.active) .description h3, .image_cart:not(.active) .description h3 {
text-align: center;
} */
#desc {
text-align: center;
}
.hidden {
display: none;
}
#somedesc {
font-size: x-large;
text-align: center;
}
JavaScript
$('.image_cart').on('click', function() {
$(this).toggleClass('active');
if ( $(this).hasClass("active") )
$("#desc").html($(this).find(".description").html());
else
$("#desc").html("");
});