<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="coolbody">
<h2>Slowly Hover on the peeping out Black thing</h2>
<h3>Make changes in CSS and Enjoy :)</h3>
</div>
<div class="peepingdiv">
<img src="http://cdn.flaticon.com/png/256/26406.png">
</div>
</div>
body {
background:#f50;
color:#fff;
}
.coolbody h2 {
text-align:center;
}
.peepingdiv {
position: fixed;
top:150px;
right: -220px;
z-index:9999;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.peepingdiv:hover {
position: fixed;
top:150px;
right: 0px;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
