JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content-box">

	<div class="grid-box">

	<div class="album-box">
		<a href="album.php?id=1">
		<div class="album-content">
			<div class="album-title">
				Test Album 1
			</div>
			<div class="album-img-wrapper">
				<img src="https://source.unsplash.com/random/300x500" alt="Album Art">
			</div>
			<div class="album-desc">
				Album description 1
			</div>
		</div>
		</a>
	</div>

	<div class="album-box">
		<a href="album.php?id=2">
		<div class="album-content">
			<div class="album-title">
				Test Album 2
			</div>
			<img src="https://source.unsplash.com/random/500x500" alt="Album Art">
			<div class="album-desc">
				Album description 2
			</div>
		</div>
		</a>
	</div>

	<div class="album-box">
		<a href="album.php?id=3">
		<div class="album-content">
			<div class="album-title">
				Test Album 3
			</div>
			<img src="https://source.unsplash.com/random/500x300" alt="Album Art">
			<div class="album-desc">
				Album description 3
			</div>
		</div>
		</a>
	</div>
  
  <div class="album-box">
		<a href="album.php?id=1">
		<div class="album-content">
			<div class="album-title">
				Test Album 1
			</div>
			<div class="album-img-wrapper">
				<img src="https://source.unsplash.com/random/300x500" alt="Album Art">
			</div>
			<div class="album-desc">
				Album description 1
			</div>
		</div>
		</a>
	</div>

	<div class="album-box">
		<a href="album.php?id=2">
		<div class="album-content">
			<div class="album-title">
				Test Album 2
			</div>
			<img src="https://source.unsplash.com/random/500x500" alt="Album Art">
			<div class="album-desc">
				Album description 2
			</div>
		</div>
		</a>
	</div>

	<div class="album-box">
		<a href="album.php?id=3">
		<div class="album-content">
			<div class="album-title">
				Test Album 3
			</div>
			<img src="https://source.unsplash.com/random/500x300" alt="Album Art">
			<div class="album-desc">
				Album description 3
			</div>
		</div>
		</a>
	</div>

	</div>

</div>

CSS

#content-box {
  max-width: 80vw;
  margin:0 auto;
  padding: 2em;
  background: gray;
  text-align: center;
}

.grid-box {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-template-rows: repeat(1, 1fr);  
}

.album-box {
  margin: 0 auto;
  display: block;
  position: relative;
  box-sizing: content-box;
  border: 1px solid black;
  background: white;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}

.album-content {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-evenly;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  position: absolute;
}

.album-img-wrapper {
  width: 100%;
  height: 100%;
  align-items: center;
}

.album-content img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.album-title {
  opacity: 0;
  color: white;
  width: 100%;
  background: rgba(0,0,0,0.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  transition: opacity 0.5s;
}

.album-desc {
  opacity: 0;
  color: white;
  width: 100%;
  background: rgba(0,0,0,0.5);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  transition: opacity 0.5s;
}

div:hover > .album-title, div:hover > .album-desc{
  opacity: 100;
  transition: opacity 0.5s;
}