<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div id="container"></div> </div> </div>

#container { position: relative; height: 300px; max-width: 500px; overflow: hidden; background-image: url("http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg"); cursor: pointer; border: 2px solid; } #container:before { content: ''; position: absolute; left: 40%; top: 28%; width: 100%; height: 100%; background-color: rgb(255, 255, 255); /* fallback */ background-color: rgba(255, 255, 255, 0.5); transform: rotate(124deg) scale(1.5) skew(3deg) translate(-6px); -webkit-transform: rotate(124deg) scale(1.5) skew(3deg) translate(-6px); -moz-transform: rotate(124deg) scale(1.5) skew(3deg) translate(-6px); -o-transform: rotate(124deg) scale(1.5) skew(3deg) translate(-6px); -ms-transform: rotate(124deg) scale(1.5) skew(3deg) translate(-6px); }

$( document ).ready(function() { $('#container').click(function(e) { var posX = $(this).offset().left, posY = $(this).offset().top; posX = e.pageX - posX; posY = e.pageY - posY; var pos = posX + posY; if (pos > 200) { $('#container').removeClass('bottomRight').toggleClass('topLeft'); } else if (pos<201) { $('#container').removeClass('topLeft').toggleClass('bottomRight'); } }); });