JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
		<ul>
			<li class="text">
				<div>
					Some Text.
				</div>
			</li>
			<li class="media">
				<img src="http://placehold.it/444x342" alt="Image">
				<div class="info">
					<h2>HEADER</h2>
					<div class="program-info">
						<p><a href="#">Program Page</a></p>
						<p><a href="#">Video</a></p>
					</div>
				</div>
			</li>
			<li class="media">
				<img src="http://placehold.it/444x342" alt="Image">
				<div class="info">
					<h2>HEADER</h2>
					<div class="program-info">
						<p><a href="#">Program Page</a></p>
						<p><a href="#">Video</a></p>
					</div>
				</div>
			</li>
		</ul>
		<ul>
			<li class="media">
				<img src="http://placehold.it/444x342" alt="Image">
				<div class="info">
					<h2>HEADER</h2>
					<div class="program-info">
						<p><a href="#">Program Page</a></p>
						<p><a href="#">Video</a></p>
					</div>
				</div>
			</li>
			<li class="text">
				<div>
					Some Text.
				</div>
			</li>
			<li class="media">
				<img src="http://placehold.it/444x342" alt="Image">
				<div class="info">
					<h2>HEADER</h2>
					<div class="program-info">
						<p><a href="#">Program Page</a></p>
						<p><a href="#">Video</a></p>
					</div>
				</div>
			</li>
		</ul>

	
	</div>

CSS

* {box-sizing:border-box;}
		.container {max-width:1140px; margin:0 auto; padding:0 10px;}
		ul {list-style:none; padding:0; margin:1% 0; font-size:0;}
		ul li {display:inline-block; width:100%; margin:0 0 1%; padding:0; height:100%; position:relative;}
		ul li img {width:100%; display:block;}
		ul li.text {background-color:#000; color:#FFF; padding:20px 10px; font-size:1.5rem; width:100%; vertical-align:top; text-align:center;}
		@media (min-width: 550px) {
			ul li {width:50%;}
			ul li.text div {margin:2%;}
		}
		@media (min-width: 1000px) {
			ul li {width:39.5%; margin:0 .5%;}
			ul li:first-child {margin-left:0;}
			ul li:last-child {margin-right:0;}
			ul li.text {width:19%; min-height:305px;}
			ul li.text div {}
		}
		@media (min-width: 1140px) {
			ul li.text {min-height:341px;}
			ul li.text div {margin:40% 0;}
		}
.info {  background: rgba(255, 255, 255, 0.83);
  bottom: 0;
  color: black;
  font-size: 2.4rem;
  left: 10px;
  opacity: 0;
  overflow: hidden;
  padding: 3rem 3rem;
  position: absolute;
  top: 10px;
  right: 10px;
  bottom:10px;
  -webkit-transition: 0.6s;
    transition: 0.6s;}
.info:hover { opacity: 1; }