playing with overlays v2

index.html

<div class="container-alt">
  <div class="fourths" id="level-1">        <img id="level-img" src="https://classyclosets.com/lp/images/price-1.jpg" style="width:100%;" />
    <div  class="level">
      
      <div class="highlight">

        <div class="vc-1-alt level-one">
          LEVEL 1 | $<span style="color:#c0c0c0">$$$</span>
        </div>
      </div>
    </div>
  </div>
  <div class="fourths"  id="level-2">
    <img src="https://classyclosets.com/lp/images/price-2.jpg" style="width:100%;" />
    <div  class="level">
      <div class="highlight">
        <div class="vc-2 level-two">
          LEVEL 2 | $$<span style="color:#c0c0c0">$$</span>
        </div>
      </div>
    </div>
  </div>

  <div class="fourths" id="level-3">
    <img src="https://classyclosets.com/lp/images/price-3.jpg" style="width:100%;" />
    <div   class="level">
      <div class="highlight">
        <div class="vc-3 level-three">
          LEVEL 3 | $$$<span style="color:#c0c0c0">$</span>
        </div>
      </div>
    </div>
   </div>
   <div class="fourths" id="level-4">
     <img src="https://classyclosets.com/lp/images/price-4.jpg" style="width:100%;" />
    <div   class="level">
      <div class="highlight">
        <div class="vc-4 level-four">
          LEVEL 4 | $$$$
        </div>
      </div
    </div>
   </div>
  </div>
</div>

<div class="container"></div>

playing-with-overlays-v2.markdown

playing with overlays v2

A Pen by Ryan Underdown on CodePen.

License.

script.js

$(document).ready(function() {
 
  $("#level-1").click(function() {
    $(".level-one").removeClass("vc-1");
    $(".level-one").addClass("vc-1-alt");
    $(".level-two").addClass("vc-2");
    $(".level-two").removeClass("vc-2-alt");
    $(".level-three").addClass("vc-3");
    $(".level-three").removeClass("vc-3-alt");
    $(".level-four").removeClass("vc-4-alt");
    $(".level-four").addClass("vc-4");
    console.log("container clicked");
  });
  
    $("#level-2").click(function() {
    $(".level-one").removeClass("vc-1-alt");
    $(".level-one").addClass("vc-1");
    $(".level-two").removeClass("vc-2");
    $(".level-two").addClass("vc-2-alt");
    $(".level-three").addClass("vc-3");
    $(".level-three").removeClass("vc-3-alt");
    $(".level-four").removeClass("vc-4-alt");
    $(".level-four").addClass("vc-4");
    console.log("container clicked");
  });
  
   $("#level-3").click(function() {
    $(".level-one").removeClass("vc-1-alt");
    $(".level-one").addClass("vc-1");
    $(".level-two").removeClass("vc-2-alt");
    $(".level-two").addClass("vc-2");
    $(".level-three").addClass("vc-3-alt");
    $(".level-three").removeClass("vc-3");
    $(".level-four").removeClass("vc-4-alt");
    $(".level-four").addClass("vc-4");
    console.log("container clicked");
  });
    $("#level-4").click(function() {
    $(".level-one").removeClass("vc-1-alt");
    $(".level-one").addClass("vc-1");
    $(".level-two").removeClass("vc-2-alt");
    $(".level-two").addClass("vc-2");
    $(".level-three").removeClass("vc-3-alt");
    $(".level-three").addClass("vc-3");
    $(".level-four").addClass("vc-4-alt");
    $(".level-four").removeClass("vc-4");
    console.log("container clicked");
  });
  });

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animateCSS/1.2.2/jquery.animatecss.min.js"></script>

style.css

.container{width:1280px;margin:auto;max-width:1280px}
.container-alt{width:100%;margin:auto;max-width:1280px;}
.fourths{width:24%;float:left;margin:0;padding:0;position:relative;cursor:pointer}
.fourths:not(:last-child) {
  margin-right: 1%;
}
.level {cursor:pointer;}
.highlight {height:100%;width:100%;}
.hidden {display:none}
.vc-1 { margin: 0;position: absolute;border:3px solid #fff;top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);background:#3F3E3C;padding:0.8em;opacity:0.98;  font-size:18px;color:white;  -webkit-user-select: none;-moz-user-select: none;  -ms-user-select: none;  user-select: none; transition: opacity 1s; 
}
.vc-1-alt {  margin: 0;position: absolute;border:3px solid #867B72;top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);background:#fff;padding:0.8em;font-size:18px;color:#867B72;-webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;user-select: none;transition: opacity 1s; }
.vc-2 { margin: 0;position: absolute;border:3px solid #fff;top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);background:#3F3E3C;padding:0.8em;opacity:0.98;  font-size:18px;color:white;  -webkit-user-select: none;-moz-user-select: none;  -ms-user-select: none;  user-select: none;transition: opacity 1s;  
}
.vc-2-alt {  margin: 0;position: absolute;border:3px solid #867B72;top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);background:#fff;padding:0.8em;font-size:18px;color:#867B72;-webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;user-select: none;transition: opacity 1s; }
#level-2 {margin-left:0}



.vc-3 { margin: 0;position: absolute;border:3px solid #fff;top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);background:#3F3E3C;padding:0.8em;opacity:0.98;  font-size:18px;color:white;  -webkit-user-select: none;-moz-user-select: none;  -ms-user-select: none;  user-select: none; transition: opacity 1s; 
}
.vc-3-alt {  margin: 0;position: absolute;border:3px solid #867B72;top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);background:#fff;padding:0.8em;font-size:18px;color:#867B72;-webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;user-select: none;transition: opacity 1s; }
#level-2 {margin-left:0}

.vc-4 { margin: 0;position: absolute;border:3px solid #fff;top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);background:#3F3E3C;padding:0.8em;opacity:0.98;  font-size:18px;color:white;  -webkit-user-select: none;-moz-user-select: none;  -ms-user-select: none;  user-select: none;transition: opacity 1s;  
}
.vc-4-alt {  margin: 0;position: absolute;border:3px solid #867B72;top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);background:#fff;padding:0.8em;font-size:18px;color:#867B72;-webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;user-select: none;transition: opacity 1s; }
#level-2 {margin-left:0em}