"Blur Menu, Menu Panel"
Bootstrap 3.3.0 Snippet by Chandan Kumar

<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 class="prflpg" align="center"><img alt="" src="https://yt3.ggpht.com/-KAW-Ma7ETqU/AAAAAAAAAAI/AAAAAAAAAAA/gJVH28o-_Vg/s100-c-k-no/photo.jpg"></div> <ul class="bmenu"> <li><a href="#">Adobe Photoshop</a></li> <li><a href="#">HTML, HTML5</a></li> <li><a href="#">CSS, CSS3</a></li> <li><a href="#">Dreamweaver</a></li> <li><a href="#">Bootstrap</a></li> <li><a href="#">Javascript, Jquery</a></li> <li><a href="#">Flash, Action Script 2.0</a></li> <li><a href="#">Adobe Premier</a></li> <li><a href="#">Adobe Illustrator</a></li> <li><a href="#">Coral Draw</a></li> </ul> </div> </div>
body {background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #D9D9D9 100%); /* ff3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #ffffff), color-stop(100%, #D9D9D9)); /* safari4+,chrome */ background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%, #D9D9D9 100%); /* safari5.1+,chrome10+ */ background: -o-radial-gradient(center, ellipse cover, #ffffff 0%, #D9D9D9 100%); /* opera 11.10+ */ background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%, #D9D9D9 100%); /* ie10+ */ background: radial-gradient(ellipse at center, #ffffff 0%, #D9D9D9 100%); /* w3c */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#D9D9D9',GradientType=1 ); /* ie6-9 */} .bmenu{ padding:30px; border:#FFF solid 20px; margin: 0 0 10px 0; position: relative; } .prflpg {padding:10px; background:#fff;} .bmenu li{ font-size: 40px; display: block; } .bmenu li a{ text-decoration:none; display: block; text-transform: uppercase; text-shadow: 1px 1px 2px rgba(89,22,20,0.3); color: #005E84; padding: 5px 20px; margin: 2px; background: rgba(255,255,255,0.1); letter-spacing: 1px; -webkit-transform: skew(-12deg); -moz-transform: skew(-12deg); -o-transform: skew(-12deg); -ms-transform: skew(-12deg); transform: skew(-12deg); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .bmenu:hover li a{ color: transparent; text-shadow: 0px 0px 10px #fff; background: rgba(0,94,132,0.2); -webkit-transform: skew(0deg); -moz-transform: skew(0deg); -o-transform: skew(0deg); -ms-transform: skew(0deg); transform: skew(0deg); } .bmenu li a:hover{ background: #005E84; text-shadow: 1px 1px 10px rgba(89,22,20,0.6); color: #C8EFFF; }

Related: See More


Questions / Comments: