Bootstrap snippet: Blog image Gallery Widget

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: widget,image,block,post



<div class="container bootstrap snippet"> <div class="col-md-6"> <div class="widget widget-gallery"> <div class="widget-gallery-header"> <h5>Latest Uploaded Image</h5> <p class="text-muted m-t-3"> last updated on 29 November 2015 </p> </div> <ul class="widget-gallery-list clearfix"> <li><a href="#"><img src="http://lorempixel.com/400/200/nature/1/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/nature/2/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/nature/3/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/nature/4/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/nature/5/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/nature/6/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/nature/7/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/nature/8/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/nature/9/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/nature/1/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/nature/2/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/nature/3/" alt=""></a></li> </ul> </div> </div> <div class="col-md-6"> <div class="widget widget-gallery"> <div class="widget-gallery-header"> <h5>Latest Uploaded Image</h5> <p class="text-muted m-t-3"> last updated on 29 November 2015 </p> </div> <ul class="widget-gallery-list clearfix"> <li><a href="#"><img src="http://lorempixel.com/400/200/abstract/1/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/abstract/2/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/abstract/3/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/abstract/4/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/abstract/5/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/abstract/6/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/abstract/7/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/abstract/8/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/abstract/9/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/abstract/1/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/abstract/2/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/abstract/3/" alt=""></a></li> </ul> </div> </div> <div class="col-md-6"> <div class="widget widget-gallery"> <div class="widget-gallery-header"> <h5>Latest Uploaded Image</h5> <p class="text-muted m-t-3"> last updated on 29 November 2015 </p> </div> <ul class="widget-gallery-list clearfix"> <li><a href="#"><img src="http://lorempixel.com/400/200/fashion/1/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/fashion/2/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/fashion/3/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/fashion/4/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/fashion/5/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/fashion/6/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/fashion/7/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/fashion/8/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/fashion/9/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/fashion/1/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/fashion/2/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/fashion/3/" alt=""></a></li> </ul> </div> </div> <div class="col-md-6"> <div class="widget widget-gallery"> <div class="widget-gallery-header"> <h5>Latest Uploaded Image</h5> <p class="text-muted m-t-3"> last updated on 29 November 2015 </p> </div> <ul class="widget-gallery-list clearfix"> <li><a href="#"><img src="http://lorempixel.com/400/200/nightlife/1/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/nightlife/2/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/nightlife/3/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/nightlife/4/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/nightlife/5/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/nightlife/6/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/nightlife/7/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/nightlife/8/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/nightlife/9/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/nightlife/1/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/nightlife/2/" alt=""></a></li> <li><a href="#"><img src="http://lorempixel.com/400/200/nightlife/3/" alt=""></a></li> </ul> </div> </div> </div>
body{ background:#eee; margin-top:20px; } .widget { border: none; box-shadow: 0 2px 0 rgba(0,0,0,.07); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin-bottom: 20px; position: relative; background: #fff; padding: 20px; display: block; } .widget-gallery-header { margin: -20px -20px 0; padding: 20px; border-radius: 5px 5px 0 0; } .widget-gallery-list { list-style-type: none; margin: -5px -20px -20px; padding: 3px 0 0 3px; } .widget-gallery-list>li { width: 25%; position: relative; padding-top: 25%; overflow: hidden; float: left; } .widget-gallery-list>li a { background: #EAEDEF; color: #aab3ba; text-decoration: none; } .widget-gallery-list>li img { position: absolute; right: 3px; bottom: 3px; max-height: 100%; } .widget-gallery-header p { font-size: 12px; } .widget-gallery-header h5, .widget-gallery-header p { margin: 0; } .text-muted { color: #aab3ba; } .m-t-3 { margin-top: 3px!important; } .widget-gallery-list>li a:before { content: ''; position: absolute; top: 50%; right: 50%; bottom: 50%; left: 50%; transition: all .2s ease-in-out; background: 0 0; z-index: 1020; border-radius: 50%; } .widget-gallery-list>li:hover a:before { content: ''; left: 0; right: 3px; top: 0; bottom: 3px; background: rgba(0,0,0,.3); border-radius: 0; }
Dey-Dey

Blog image Gallery Widget

Dey-Dey
  Dec 23rd 2015, 08:08
1.4K Views