JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<html style="background-image: url(http://www.psdgraphics.com/file/colorful-triangles-background.jpg);">
 <body>   
<span class="btn btn-default glyphicon glyphicon-camera takePic">
</span>
<span class="btn btn-default glyphicon glyphicon-camera">
    <span class="subBtn glyphicon glyphicon-remove"></span>
</span>
<span class="btn btn-default glyphicon glyphicon-camera">
    <span class="subBtn glyphicon glyphicon-ok"></span>
</span>
<span class="btn btn-default glyphicon glyphicon-camera">
    <span class="subBtn glyphicon glyphicon-repeat"></span>
</span>


<audio src="http://www.soundjay.com/mechanical/camera-shutter-click-08.mp3"></audio>
<div id="shutter"></div>
    </body>   
</html>

CSS

/* Customized Vermilion Buttons */
.subBtn{
    position:absolute;
    font-size:50%;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    top:50%;
    right:25%;
}

html {
background: none;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
}
body{
    background-color:rgba(255, 255, 255, 0);
}
#shutter {
  opacity: 0;
  transition: all 30ms ease-in;/* Shutter speed */
  position: fixed;
  height: 0%;
  width: 0%;
  pointer-events: none;

  background-color: white;/* Shutter Color */
  
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%)
}
#shutter.on {
  opacity: 1;/* Shutter Transparency */
  height: 100%;
  width: 100%;
}

JavaScript

$('.takePic').click(function() {
  $('#shutter').addClass('on');
  $('audio')[0].play();
  setTimeout(function() {
    $('#shutter').removeClass('on');
  }, 30*2+45);/* Shutter speed (double & add 45) */
});