Cacher is the code snippet organizer for pro developers

.grid-wrapper
  .grid-item
    .grid-item-inner
      h1 Beaches
    .subgrid-wrapper.subgrid-wrapper-1
      .subgrid-item
        p Item A
      .subgrid-item
        p Item B
      .subgrid-item
        p Item C
      .subgrid-item
        p Item D
  .grid-item
    .grid-item-inner
      h1 Mountains
    .subgrid-wrapper.subgrid-wrapper-2
      .subgrid-item
        p Item A
      .subgrid-item
        p Item B
      .subgrid-item
        p Item C
      .subgrid-item
        p Item D
  .grid-item
    .grid-item-inner
      h1 Cities
    .subgrid-wrapper
      .subgrid-item
        p Item A
      .subgrid-item
        p Item B
      .subgrid-item
        p Item C
      .subgrid-item
        p Item D
  .grid-item
    .grid-item-inner
      h1 Trains
    .subgrid-wrapper
      .subgrid-item
        p Item A
      .subgrid-item
        p Item B
      .subgrid-item
        p Item C
      .subgrid-item
        p Item D

$('.subgrid-wrapper').addClass('hide');

$('.grid-item').on('click', function(e) {
  e.preventDefault();
  var currentSubgrid = $(this).find('.subgrid-wrapper');
  var currentBtn = $(this).find('h1');
  $('.grid-item h1').removeClass('hide');
  $('.subgrid-wrapper').addClass('hide');
  currentBtn.addClass('hide');
  currentSubgrid.removeClass('hide').addClass('fade-in');
});

$('.subgrid-item').on('click', function(e) {
  e.preventDefault();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

*
  box-sizing: border-box

body
  margin: 0
  height: 90vh
  font-family: 'Roboto Condensed', sans-serif
  
.grid-wrapper
  display: grid
  grid-template-columns: repeat(2, 50%)
  grid-template-rows: repeat(2, 50%)
  align-content: stretch
  height: 100vh
  z-index: 1
  
.grid-item
  display: flex
  justify-content: center
  align-items: center
  color: white
  background: transparent
  
  &:hover
    cursor: pointer
  
  h1
    border: 1px solid rgba(white, 0.5)
    padding: 1rem
    text-transform: uppercase
    font-size: 1rem
    font-weight: 300
    
    
  @media (min-width: 600px)
    h1
      font-size: 1.5rem
      letter-spacing: 1px
  
  &:nth-child(1)
    background: 
      // color: red
      image: linear-gradient(rgba(black, 0.3), rgba(black, 0.3)), url(https://unsplash.it/1500?image=986)
      size: cover
      position: center

  &:nth-child(2)
    background: 
      // color: blue
      image: linear-gradient(rgba(black, 0.3), rgba(black, 0.3)), url(https://unsplash.it/1500?image=1051)
      size: cover
      position: center
  
  &:nth-child(3)
    background: 
      // color: green
      image: linear-gradient(rgba(black, 0.3), rgba(black, 0.3)), url(https://unsplash.it/1500?image=411)
      size: cover
      position: center top
  
  &:nth-child(4)
    background: 
      // color: purple
      image: linear-gradient(rgba(black, 0.3), rgba(black, 0.3)), url(https://unsplash.it/1500?image=524)
      size: cover
      position: center  
  
.subgrid-wrapper
  display: grid
  grid-template-columns: 1fr
  grid-template-rows: repeat(4, 1fr)
  justify-items: center
  align-items: center
  height: 100%
  width: 100%
  z-index: 100

@media (min-width: 600px)
  .subgrid-wrapper
    grid-template-columns: repeat(2, 1fr)
    grid-template-rows: repeat(2, 1fr)
  
.subgrid-item
  background: rgba(black, 0.9)
  color: white
  height: 100%
  width: 100%
  display: flex
  justify-content: center
  align-items: center
  transition: all 300ms ease
  font-size: .7rem
  
  &:hover
    background: rgba(black, 0.7)
    cursor: pointer
  
@media (min-width: 600px)
  .subgrid-item
    font-size: 1rem
  
.hide
  display: none
  
.fade-in
  animation: fadeIn 500ms ease
  opacity: 1
  z-index: 100
  
@keyframes fadeIn
  0%
    opacity: 0
  100%
    opacity: 1