<div class="container">
	<div class="item">
		<div class="image">
			<img
				src="https://images.unsplash.com/photo-1570970580763-7993ca30d726?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ"
				alt="">
			<button class="name">Plane One</button>
		</div>
		<div class="desc">Vestibulum elit erat, fringilla eget libero eget, aliquet interdum ex. Morbi venenatis massa ut
			justo imperdiet sagittis. In et dictum leo. Nam ornare felis sit amet nisl gravida, scelerisque consectetur turpis
			tempor. Donec feugiat sapien nisi, vitae tempus leo tincidunt ac. Pellentesque condimentum elit ullamcorper,
			facilisis lacus eu, suscipit ante. Nulla massa arcu, maximus at quam quis, luctus faucibus ex.
			<button>Close</button>

		</div>
	</div>
	<div class="item">
		<div class="image">
			<img
				src="https://images.unsplash.com/photo-1487692703274-4965f352a3ef?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ"
				alt="">
			<button class="name">Plane Two</button>

		</div>
		<div class="desc">Duis luctus pretium pretium. Sed scelerisque ipsum egestas lorem semper tempor. Nam consectetur
			massa enim, sit amet facilisis metus commodo sollicitudin. Ut at pretium enim, quis lobortis purus. Mauris vehicula
			turpis nec libero fermentum ultricies. Integer interdum pulvinar porttitor. Phasellus finibus turpis vitae augue
			aliquet, ac dapibus odio eleifend. Pellentesque auctor purus at varius consequat. Vestibulum vel justo a tellus
			ultricies posuere ut at lacus.
			<button>Close</button>
		</div>
	</div>
</div>
.container {
	width: 800px;
	display: flex;
	justify-content: space-around;
}

button {
	cursor: pointer;
	border: none;
	color: #fff;
	cursor: pointer;
}

.item {
	width: calc(100% - 20px / 2);
	margin-right: 20px;
}

img {
	max-width: 100%;
}

.image {
	position: relative;
	border-bottom: 10px solid #AFB42B;
}

.name {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background: rgba(0,0,0,0.75);
	padding: 20px;
	
	&:hover,
	&:focus {
		background: rgba(0,0,0,0.9);
	}
}

.desc {
	display: none;
	background: #AFB42B;
	padding: 20px;
	
	&.active {
		display: block;
	}
	
	button {
		display: block;
		background-color: #222;
		padding: 10px 15px;
		margin-top: 15px;
	}
}
View Compiled
$('.name').on('click', function() {
	var parentItem = $(this).closest('.item');
	$(parentItem).find('.desc').toggle();
});

$('.desc button').on('click', function() {
		$(this).parent('.desc').hide();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js