JSFiddle - React, Tailwind, and code Playground

by Danielle_S

HTML

<div class="box">
  <a href="//www.nghs.com"><img class="pic" src="https://www.nghs.com/dev/danielle-test/ford-ash-01.png" style="width: 100%;">
	<div class="overlay">
		<div class="text">
			"Choosing Hospice of NGMC was one of the greatest decisions I ever made."
		</div>
	</div>Read Ford's Story</a>
</div>
<div class="box">
  <a href="//www.nghs.com"><img class="pic" src="https://placebear.com/200/300" style="width: 100%;">
	<div class="overlay">
		<div class="text">
			"Choosing Hospice of NGMC was one of the greatest decisions I ever made."
		</div>
	</div>Read Janice's Story</a>
</div>

CSS

.box {
  max-width: 200px;
  text-align: center;
  margin-bottom: 30px;
}

.rsmall .box {
  max-width: 100%;
  width: 100%;
}

.box .overlay {
  display: none;
  background-color: green;
}

.box.active .overlay {
  display: block;
}

.box a {
  display: block;
}

.rlarge .box {
  max-width: 300px;
}

JavaScript

$(".rlarge .box").click(function() {
  $(this).toggleClass("active");
});

$(".rsmall .box a").click(function() {
  alert("clicked on mobile");
  event.preventDefault();
});



/* DON'T USE THE STUFF BELOW */

//change width value on load
$(window).load(function() {
  responsive_resize();
});

//change width value on resize
$(window).resize(function() {
  responsive_resize();
});
responsive_resize();

function responsive_resize() {
  var current_width = $(window).width();
  //do something with the width value here!
  if (current_width < 500)
    $('html').removeClass("rlarge").addClass("rsmall");



  if (current_width > 500) {
    $('html').removeClass("rsmall").addClass("rlarge");

  }
}