<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><br/><strong>Click Me!</strong></div> </div><!--ends row--> </div><!--ends container-->

div { height: 60px; width: 100px; border-radius: 5px; background-color: #B378D3; text-align: center; color: #FFFFFF; font-family: Verdana, Arial, Sans-Serif; opacity: 1; }

$(document).ready(function(){ $('div').mouseenter(function() { $('div').fadeTo('fast', 0.5); }); $(document).ready(function(){ $('div').mouseleave(function(){ $('div').fadeTo('slow', 1); }); }); });