Circle Player

by D S

HTML

<div class="crlPlayer">

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

JavaScript

// find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", function(){
  banner.addClass("alt")
})