<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="the-stripe"> <div class="inner clearfix"> <div class="box first"> <h3>No 1 box</h3> </div> <div class="box middle"> <h3>No 2 box</h3> </div> <div class="box end"> <h3>No 3 box</h3> </div> <div class="well highlight"> </div> </div> </div> </div>

.the-stripe { background-color: rgb(162, 224, 255); position: relative; } .inner { width: 90%; margin: 0 auto; padding: 20px 0; height: 200px; position: relative; } .box { float: left; width: 29%; text-align: center; position: relative; display: block; height: 100%; padding: 80px 2% 0; margin: 0px; background: url(http://dl.dropbox.com/u/31546161/menu-icon.png) no-repeat center 10px; z-index: 1; } .container {margin: 35px;} .box:hover {opacity:0.5} .well, .middle, .end {transition: all .5s ease} .well.highlight { position: absolute; left: 0%; top: 0px; height: 100%; width: 33%; opacity:0.5; z-index: 0; } .middle:hover ~ .well.highlight {left: 33%;} .end:hover ~ .well.highlight {left: 66%;} .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }