"Image Hover"
Bootstrap 3.3.0 Snippet by FelFly

<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"> <h1 class="col-xs-12">Open Data Sites</h1> <div id="categories" class=" col-xs-12 col-sm-4"> <div class="list-group"> <a href="" id="ember316" class="list-group-item list-group-item-action ember-view">All</a> <a href="" id="ember323" class="list-group-item list-group-item-action ember-view">Local</a> <a href="" id="ember324" class="list-group-item list-group-item-action ember-view">State</a> <a href="" id="ember325" class="list-group-item list-group-item-action ember-view">National</a> <a href="" id="ember326" class="list-group-item list-group-item-action ember-view">International</a> <a href="" id="ember327" class="list-group-item list-group-item-action ember-view">Non-governmental Organizations</a> </div> </div> <div id="content" class="col-xs-12 col-sm-8"> <p>This is but a small sample of the current Open Data sites that exists for you to explore and draw inspiration from, for your own site. You can browse sites that focus specifically on providing open data for local communities, or you can look at those with wider, national, or international scopes.</p> <div class="row"> <br> <div class="col-xs-12 col-md-6 col-lg-4 "> <div class="thumbnail"> <div class="overlay gallery-hover"> <a title="Tallahassee Open Data" href="http://talgov.tlcgis.opendata.arcgis.com" target="_blank"> <span class="glyphicon glyphicon-link"></span> <img src="https://placeimg.com/263/193/animals" alt="..."> </a> </div> </div> <div class="caption"> <p class="text-center"><a title="Tallahassee Open Data" href="http://talgov.tlcgis.opendata.arcgis.com" target="_blank">Tallahassee Open Data</a></p> <p></p> </div> <div class="col-xs-12 col-md-6 col-lg-4 "> <div class="thumbnail"> <div class="overlay gallery-hover"> <a title="Esri UK Bureau" href="http://data.bureau.opendata.arcgis.com" target="_blank"> <span class="glyphicon glyphicon-link"></span> <img src="https://placeimg.com/263/193/animals" alt="..."> </a> </div> </div> <div class="caption"> <p class="text-center"><a title="Esri UK Bureau" href="http://data.bureau.opendata.arcgis.com" target="_blank">Esri UK Bureau</a></p> <p></p> </div> </div> <div class="col-xs-12 col-md-6 col-lg-4 "> <div class="thumbnail"> <div class="overlay gallery-hover"> <a title="City of Kitchener" href="http://data.kitchenergis.opendata.arcgis.com" target="_blank"> <span class="glyphicon glyphicon-link"></span> <img src="https://placeimg.com/263/193/animals" alt="..."> </a> </div> </div> <div class="caption"> <p class="text-center"><a title="City of Kitchener" href="http://data.kitchenergis.opendata.arcgis.com" target="_blank">City of Kitchener</a></p> <p></p> </div> </div> </div> </div> </div>
/* CSS used here will be applied after bootstrap.css */ .thumbnail { position: relative; } .overlay { position: relative; } .overlay:before { position: absolute; content:" "; top:0; left:0; width:100%; height:100%; display: none; z-index:0; } .overlay:hover:before { display: block; } .gallery-hover:before { background-color: rgba(19, 111, 191, 0.6); } /*position: absolute; background-color: rgba(26, 74, 114, 0.6);*/ .thumbnail a .glyphicon { position: absolute; top:60px; left:90px; color: #fff; font-size: 45px; line-height: 45px; text-decoration: none; }

Related: See More


Questions / Comments: