<div id="hoverTest" class="hasHover">
<ul class="grid">
  <li> <img  class="image" src="https://placekitten.com/200/100">
    <div class="overlay">
      <h2>The heading</h2>
      <p>The content can go here but you will need to decide whether these blocks will be the same height or adjust to content size.</p>
      <p>You can <a href="http://www.google.com">Read Less </a>here</p>
    </div>
  </li>
  <li> <img  class="image" src="https://placekitten.com/200/200">
    <div class="overlay">
      <h2>The heading</h2>
      <p>The content can go here but you will need to decide whether these blocks will be the same height or adjust to content size.</p>
      <p>You can <a href="http://www.google.com">Read Less </a>here</p>
    </div>
  </li>
  <li> <img  class="image" src="https://placekitten.com/200/150">
    <div class="overlay">
      <h2>The heading</h2>
      <p>The content can go here but you will need to decide whether these blocks will be the same height or adjust to content size.</p>
      <p>You can <a href="http://www.google.com">Read Less </a>here</p>
    </div>
  </li>
  <li> <img  class="image" src="https://placekitten.com/200/100">
    <div class="overlay">
      <h2>The heading</h2>
      <p>The content can go here but you will need to decide whether these blocks will be the same height or adjust to content size.</p>
      <p>You can <a href="http://www.google.com">Read Less </a>here</p>
    </div>
  </li>
    <li> <img  class="image" src="https://placekitten.com/300/150">
    <div class="overlay">
      <h2>The heading</h2>
      <p>The content can go here but you will need to decide whether these blocks will be the same height or adjust to content size.</p>
      <p>You can <a href="http://www.google.com">Read Less </a>here</p>
    </div>
  </li>
  <li> <img  class="image" src="https://placekitten.com/200/150">
    <div class="overlay">
      <h2>The heading</h2>
      <p>The content can go here but you will need to decide whether these blocks will be the same height or adjust to content size.</p>
      <p>You can <a href="http://www.google.com">Read Less </a>here</p>
    </div>
  </li>
    <li> <img  class="image" src="https://placekitten.com/250/250">
    <div class="overlay">
      <h2>The heading</h2>
      <p>The content can go here but you will need to decide whether these blocks will be the same height or adjust to content size.</p>
      <p>You can <a href="http://www.google.com">Read Less </a>here</p>
    </div>
  </li>
  <li> <img  class="image" src="https://placekitten.com/200/150">
    <div class="overlay">
      <h2>The heading</h2>
      <p>The content can go here but you will need to decide whether these blocks will be the same height or adjust to content size.</p>
      <p>You can <a href="http://www.google.com">Read Less </a>here</p>
    </div>
  </li>
    <li> <img  class="image" src="https://placekitten.com/100/50">
    <div class="overlay">
      <h2>The heading</h2>
      <p>The content can go here but you will need to decide whether these blocks will be the same height or adjust to content size.</p>
      <p>You can <a href="http://www.google.com">Read Less </a>here</p>
    </div>
  </li>
  <li> <img  class="image" src="https://placekitten.com/200/150">
    <div class="overlay">
      <h2>The heading</h2>
      <p>The content can go here but you will need to decide whether these blocks will be the same height or adjust to content size.</p>
      <p>You can <a href="http://www.google.com">Read Less </a>here</p>
    </div>
  </li>
</ul>
</div> 
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
html, body {
	margin:0;
	padding:0;
}
.grid {
	display:flex;
	flex-wrap:wrap;
	max-width:1280px;
	margin:0 auto;
	padding:0;
	list-style:none;
}
.grid li {
	display:flex;
	flex:0 0 25%;
	min-width:200px;
	padding:10px;
	border:20px solid #fff;
	border-top-width:50px;
	border-bottom-width:50px;
	background:#f9f9f9;
	position:relative;
	cursor:pointer;
}
.image {
	width:100%;
	height:auto;
	margin:auto;
	align-self:center;
}
.overlay {
	opacity:0;
	transform: scale(1, 0.0);
	transition: all 0.4s ease 0.1s;
	z-index:-1;
	position :absolute;
	top:-50px;
	left:-10px;
	right:-10px;
	bottom:-50px;
	overflow:auto;
	padding:10px;
	background:#ccc;
	border:1px solid #000;
}
.hasHover .grid li:hover .overlay {
	opacity:1;
	transform: scale(1, 1);
	z-index:2;
}
.noHover .grid li.active .overlay {
	opacity:1;
	transform: scale(1, 1);
	z-index:2;
}

@media screen and (max-width:1080px){
	.grid li {
		flex:0 0 33%;
	}
}

@media screen and (max-width:800px){
	.grid li {
		flex:0 0 49%;
	}
}
@media screen and (max-width:560px){
	.grid li {
		flex:1 0 100%;
	}
}
// detect touch
if ("ontouchstart" in document.documentElement) {
  document.getElementById("hoverTest").classList.add("noHover");
  document.getElementById("hoverTest").classList.remove("hasHover");
}

let theImages = Array.from(document.querySelectorAll(".grid li"));

const handleClick = e => {
  //e.preventDefault();
  const active = document.querySelector(".grid .active");

  if (e.currentTarget.classList.contains("active")) {
    e.currentTarget.classList.remove("active");
  } else {
    if (active) {
      active.classList.remove("active");
    }
    e.currentTarget.classList.add("active");
  }
};

theImages.forEach(node => {
  node.addEventListener("click", handleClick);
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.