Circle Player

by D S

HTML

<div class="crlPlayer">
  <div class="mainsctn">
    <div class="frnt">
      <div class='mnu'>
      hi
      </div>
    </div>
    <div class="bck" style="display:none">
      <div class='mnu'>
      bye
      </div>
    </div>
  </div>

</div>

CSS

body {
  background: #20272f;
}

.crlPlayer {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.4);
  background: url(https://goo.gl/hZ9AXb);
  background-size: cover;
  opacity: 0.5;
  -webkit-transition: all 0.5s;
  overflow: hidden;
}

.crlPlayer:hover {
  opacity: 1;
}

div.crlPlayer>div.mainsctn {
  width: 100%;
  height: 100%;
  top: 0;
}

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

div.crlPlayer>div.mainsctn>.frnt {}

div.crlPlayer>div.mainsctn>.bck {}

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);
  })
});