<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 store-locations"> <div class="col-md-3"> <div> <img src="http://woofnyc.bravehost.com/images/FirstOval.png" alt="First Avenue" class="img-thumbnail"> <h2>First Avenue</h2> <p>...</p> <a href="#showFirst" class="btn btn-primary" title="First Avenue Landing Page">Select Location</a> </div> </div> <div class="col-md-3"> <div> <img src="http://woofnyc.bravehost.com/images/E81Oval.png" alt="East 81st Street" class="img-thumbnail"> <h2>81st Street</h2> <p>...</p> <a href="#showE81" class="btn btn-primary" title="East 81st Street Landing Page">Select Location</a> </div> </div> <div class="col-md-3"> <div> <img src="http://woofnyc.bravehost.com/images/LexOval.png" alt="Lexington Avenue" class="img-thumbnail"> <h2>Lexington Avenue</h2> <p>...</p> <a href="#showLex" class="btn btn-primary" title="Lexington Avenue Landing Page">Select Location</a> </div> </div> </div> </div>

body {background:#000} .store-loactions{ padding: 10px 0; text-align: center; } .store-loactions > div > div{ padding: 5px; border: 4px inset #ccc; border-radius: 4px; transition: 0.9s; } .store-loactions > div:hover > div{ margin-top: -10px; border: 0px solid rgb(200, 200, 200); box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px; background: #A60000; transition: 1.0s; } .img-thumbnail { background:#a60000 }