JSFiddle - React, Tailwind, and code Playground

by D S

HTML

<div class="Vplayer">
  <div class="blur"></div>
  <div class="mainsctn">
    <div class="frnt">
    <div class="mnu">prehhhhhss</div>
      <div class="atwrk"></div>
    </div>
    <div class="bck" style="display:none">
      <p>back</p>
      <div class="mnu">prehhhhhss</div>
    </div>
  </div>
</div>

CSS

div.Vplayer {
  width: 500px;
  height: 150px;
  border: 1px solid rgba(0, 0, 0, .5);
  overflow: hidden;
  background: red;
  position: relative;
}
div.Vplayer > .blur {
  width: 100%;
  height: 100%;
  background: url(https://goo.gl/HwL5xN);
  background-size: cover;
  background-position: center;
  filter: blur(5px);
  position: absolute;
}

div.Vplayer > div.mainsctn {
  width: 100%;
  height: 100%;
  top: 0;
}
div.Vplayer > div.mainsctn > .frnt,
div.Vplayer > div.mainsctn > .bck {
  width: 100%;
  Height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
}
div.Vplayer > div.mainsctn > .frnt {}

div.Vplayer > div.mainsctn > .bck {}

div.Vplayer > div.mainsctn > .frnt > .atwrk{
  width:100px;
  height:100px;
  border:1px solid #000;
  margin:25px;
  background: url(https://goo.gl/HwL5xN);
  background-size: cover;
}

JavaScript

$("div.mnu").on("click tap", function() {
  var visibleObj = $('.mainsctn > div:visible');
  if ($("div.bck").css("display") == "none") {
    var inVisibleObj = $("div.bck")
  } else {
    var inVisibleObj = $("div.frnt")
  }
  visibleObj.fadeOut(500, function() {
    inVisibleObj.fadeIn(500);
  })
});