playing with overlays v2

index.html

<div class="level">
  <div class="highlight">
    <div id="level-one" class="vertical-center2">
      LEVEL 1 | $<span style="color:#c0c0c0">$$$</span>
    </div>
  </div
</div>

playing-with-overlays-v2.markdown

playing with overlays v2

A Pen by Ryan Underdown on CodePen.

License.

script.js

$(document).ready(function() {
 
  $(".level").click(function() {
    $("#level-one").toggleClass("vertical-center");
     $("#level-one").toggleClass("vertical-center2");
    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

.level {width:550px;margin:auto;background-image:url("https://classyclosets.com/lp/images/price-2.jpg");height:400px;cursor:pointer;}
.highlight {height:400px;width:550px;}
.hidden {display:none}
.vertical-center {
  margin: 0;
  position: absolute;
  border:3px solid #fff;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background:#3F3E3C;padding:1em;
  opacity:0.98;
  font-size:24px;
  color:white;
}
.vertical-center2 {
  margin: 0;
  position: absolute;
  border:3px solid #867B72;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background:#fff;padding:1em;
  font-size:24px;
  color:#867B72;
}