slavAAvals,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.list {
width: 200px;
margin: 0 auto;
display: flex;
flex-direction: row;
}
.item {
margin: 0 auto;
background-color: #ccc;
}
.menu {
display: block;
}
.hidden {
display: none;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var menu = document.querySelector('.menu');
var img = menu.querySelector('img');
[].forEach.call(document.querySelectorAll('.item'), function(item) {
var src = item.querySelector('a').getAttribute('href');
item.addEventListener('click', function(event) {
event.preventDefault();
img.src = src;
menu.classList.remove('hidden');
});
});
});
</script>
</head>
<body>
<div class="list">
<div class="item">
<a href="https://cdn.pixabay.com/user/2015/01/20/20-56-42-330_250x250.jpg" class="link"><img src="https://cdn.pixabay.com/user/2015/01/20/20-56-42-330_250x250.jpg" alt="" class="img"></a>
<div class="descr">
<span class="descr">blabla</span>
</div>
</div>
<div class="item">
<a href="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSWp0KfLKLZ1_deYGBt699_-GhMppGAtRy5q18ilY5R3bUWUZqc" class="link"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSWp0KfLKLZ1_deYGBt699_-GhMppGAtRy5q18ilY5R3bUWUZqc" alt="" class="img"></a>
<div class="descr">
<span class="descr">blabla</span>
</div>
</div>
</div>
<div class="menu hidden">
<a href="#"><img src="#" alt=""></a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et repellendus quo quis officiis, nesciunt iusto quidem corporis rem quia, vero pariatur voluptates delectus facere impedit iure perspiciatis amet. Eveniet, molestias.</p>
</div>
</body>
</html>
