"P&R Events"
Bootstrap 3.3.0 Snippet by sergioaclo

<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 ----------> <!-- -------------------------------------------------------------------------------------------START NEW MONTH------------------------------------------------------------------------------------------ --> <figure class="snip1237"> <div class="image" id="truck"> <img src="http://www.whitemarshtwp.org/ImageRepository/Document?documentID=1223" alt="Touch-A-Truck" height="100%" width="100%"><em></em> </div> <figcaption> <h3 style="text-align:center;">Touch-A-Truck</h3><br> <a href="http://www.whitemarshtwp.org/ImageRepository/Document?documentID=1223" class="read-more">Read More</a> </figcaption> </figure> <!-- -------------------------------------------------------------------------------------------START NEW MONTH------------------------------------------------------------------------------------------ --> <figure class="snip1237"> <div class="image" id="yardsale"> <img src="http://www.whitemarshtwp.org/ImageRepository/Document?documentID=1234" alt="Yard Sale" height="100%" width="100%"><em></em> </div> <figcaption> <h3 style="text-align:center;">Community Yard Sale</h3><br> <a href="http://www.whitemarshtwp.org/ImageRepository/Document?documentID=1234" class="read-more">Read More</a> </figcaption> </figure> <!-- -------------------------------------------------------------------------------------------START NEW MONTH------------------------------------------------------------------------------------------ --> <figure class="snip1237"> <div class="image" id="shredding"> <img src="http://www.whitemarshtwp.org/ImageRepository/Document?documentID=1226" alt="Shredding Day" height="100%" width="100%"><em></em> </div> <figcaption> <h3 style="text-align:center;">Shredding day</h3><br> <a href="http://www.whitemarshtwp.org/ImageRepository/Document?documentID=1226" class="read-more">Read More</a> </figcaption> </figure> <!-- -------------------------------------------------------------------------------------------START NEW MONTH------------------------------------------------------------------------------------------ --> <figure class="snip1237"> <div class="image" id="haunt"> <img src="http://www.whitemarshtwp.org/ImageRepository/Document?documentID=1221" alt="Haunted Barn" height="100%" width="100%"><em></em> </div> <figcaption> <h3 style="text-align:center;">Haunted Barn</h3><br> <a href="http://www.whitemarshtwp.org/ImageRepository/Document?documentID=1221" class="read-more">Read More</a> </figcaption> </figure> <!-- -------------------------------------------------------------------------------------------START NEW MONTH------------------------------------------------------------------------------------------ --> <figure class="snip1237"> <div class="image" id="teenie"> <img src="http://www.whitemarshtwp.org/ImageRepository/Document?documentID=1222" alt="Teenie Halloweenie" height="100%" width="100%"><em></em> </div> <figcaption> <h3 style="text-align:center;">Teenie Halloweenie</h3><br> <a href="http://www.whitemarshtwp.org/ImageRepository/Document?documentID=1222" class="read-more">Read More</a> </figcaption> </figure> <!-- -------------------------------------------------------------------------------------------START NEW MONTH------------------------------------------------------------------------------------------ --> <figure class="snip1237"> <div class="image" id="gingerbread"> <img src="http://www.whitemarshtwp.org/ImageRepository/Document?documentID=1220" alt="Gingerbread" height="100%" width="100%"><em></em> </div> <figcaption> <h3 style="text-align:center;">Gingerbread House Decorating Contest</h3> <a href="http://www.whitemarshtwp.org/ImageRepository/Document?documentID=1220" class="read-more">Read More</a> </figcaption> </figure>
/* Icon set - http://ionicons.com */ @import url(http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css); @import url(https://fonts.googleapis.com/css?family=Raleway:400,500); figure.snip1237 { font-family: 'Raleway', Arial, sans-serif; position: relative; float: left; overflow: hidden; margin: 20px 20px; 1%; min-width: 250px; max-width: 250px; width: 100%; background: #1a1a1a; color: #ffffff; text-align: left; box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%); -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75); box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75); } figure.snip1237 * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } figure.snip1237 .image { height: 250px; overflow: hidden; position: relative; } figure.snip1237 h3 { margin: 0 0 3px; font-weight: 900; font-size:15px; } figure.snip1237 p { margin: 0; } /* ----------------------------------------------------WHITESPACE START */ figure.snip1237 figcaption { /* padding order: top right bottom left */ padding: 5px 20px 15px 20px; background-color: #ffffff; color: #000000; position: relative; font-size: 0.9em; } figure.snip1237 figcaption p { margin-bottom: 15px; } figure.snip1237 figcaption:before { position: absolute; content: ''; z-index: 2; bottom: 100%; left: 0; width: 100%; height: 40px; background-image: -webkit-linear-gradient(top, transparent 0%, #ffffff 100%); background-image: linear-gradient(to bottom, transparent 0%, #ffffff 100%); } /* ----------------------------------------------------WHITESPACE END */ /* ----------------------------------------------------READ MORE START */ figure.snip1237 .read-more { display: inline-block; width: 100%; text-align: center; border: 2px solid #20638f; padding: 0.4em 0.6em; color: #ffffff; text-decoration: none; font-weight: 800; font-size: 0.9em; text-transform: uppercase; background-color: #20638f; } figure.snip1237 .read-more:hover { background-color: #ba2f00; color: #ffffff; } /* ----------------------------------------------------READ MORE END */ /* ----------------------------------------------------HOVER START */ figure.snip1237:hover:before, figure.snip1237.hover:before { -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transform: skew(-45deg) translateX(-50%); transform: skew(-45deg) translateX(-50%); } figure.snip1237:hover:after, figure.snip1237.hover:after { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; -webkit-transform: skew(-45deg) translateX(-75%); transform: skew(-45deg) translateX(-75%); } /* ----------------------------------------------------HOVER END */ /* Image Resizer */ figure.snip1237:hover img, figure.snip1237.hover img { -webkit-transform: scale(25); transform: scale(1.25); } /* Demo purposes only */ body { background-color: #ffffff; }

Related: See More


Questions / Comments: