Bootstrap 3.0.0 Snippet by sam1225

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <h1><span style="opacity:0;">-</span><span style="font-size: 1.7em; color: #35ADF9;font-weight: 900;text-shadow: 4px 4px #000000;">Design Services</span></h1> <div id="aligner"> <figure class="snip1491"> <img src="https://lh5.googleusercontent.com/Nz7ZsCvHpH-5RjaSBWznZnFwn3B5NQfv08YKqsLFMSGzRvzQww9uwk2qZMJ0uHruA_rG8g=s190" width="100%" height="100%" alt="sample92" /> <figcaption> <h2>Dynamic & Responsive Designs</h2> <p>Fully customized and beautifully crafted designs to meet your needs.</p> </figcaption> <a href="#"></a> </figure> <figure class="snip1491"><img src="https://lh6.googleusercontent.com/W8hm-Kk2WMDdneq8dpw74FQVUaXxbxlIdCzGoz7i1pdQ2iB8wL3YvaiV_gwfsebaD6U3Mw=w2512-h1078" height="100%" width="100%" alt="sample94" /> <figcaption> <h2>Content Management Systems</h2> <p>Let's choose the right one for you. Already have one? Let's reach its full potential. Drag-and-drop capabilities are nice for staff who still poke the keyboard to type but it's not so great for your audience.</p> </figcaption> <a href="#"></a> </figure> <figure class="snip1491"><img src="https://lh4.googleusercontent.com/JIyxXRSpdcmo82oarIMbBeWNs3WRdR5SRjbgslG-NyYUBqlixjL4RyGijWhZWHw82AMmtA=s190" height="100%" width="100%" alt="sample96" /> <figcaption> <h2>Custom Graphic Arts</h2> <p>Logo designs, marketing flyers, web components, banners, etc.</br></br>Heck, we'll put your face on a t-shirt or mug if you want! </p> </figcaption> <a href="#"></a> </figure> </div> <div id="aligner"> <figure class="snip1491"> <img src="https://lh4.googleusercontent.com/VmUBVYgV13J7UdXOuhNTMV1WIOhvn2aEclwJa5y7W-8bDph66_yK9e6RFkezrg9WcIDIZQ=w2512-h1078" height="100%" width="100%" alt="sample92" /> <figcaption> <h2>Maintenance and Upgrade</h2> <p>Keep up with the modern world. Dynamic, user-friendly, visually appealing websites are the norm. Upgrade your website ASAP.</p> </figcaption> <a href="#"></a> </figure> <figure class="snip1491"><img src="https://lh4.googleusercontent.com/QWGR74ErHuFLqo7bfNLhuN7O0NhAe_BESgsoo-1MB4-9KtqDCSJ0C6hndcXLQMUXxmmQkQ=s190" height="100%" width="100%" alt="sample94" /> <figcaption> <h2>Cross-Platform Integration</h2> <p>Smartphones, tablets, and smartwatches are everywhere. Make sure your content is presented the way you want them to regardless of your audience's preferences</p> </figcaption> <a href="#"></a> </figure> <figure class="snip1491"><img src="https://lh4.googleusercontent.com/mWBRc0kH_t8FeUJKxCj7iwi6l78281DM1Yc28xJVd53ajRlaiGBgYtBJHsX0046V1hUHMw=w2512-h1078" width="100%" height="100%" alt="sample96" /> <figcaption> <h2>Optimization & Analytics</h2> <p>A slow and disorganized website conveys undesirable messages about you and your organization. Use data-driven strategies to optimize your digital presence.</p> </figcaption> <a href="#"></a> </figure> </div>
#aligner { } @import url(https://fonts.googleapis.com/css?family=Slabo+27px); @import url(https://fonts.googleapis.com/css?family=Lato); .snip1491 { font-family: 'Lato', sans-serif; position: relative; float: left; overflow: hidden; margin: 20px 20px; 1%; min-width: 230px; max-width: 259px; height: 140px; width: 100%; color: #ffffff; text-align: left; font-size: 16px; background-color: #1A1A1A; border-style: solid; border-width: 5px; border-color: black; } .snip1491 * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.45s ease; transition: all 0.45s ease; } .snip1491 img { vertical-align: top; max-width: 100%; height: 140px; backface-visibility: hidden; } .snip1491 figcaption { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; padding: 5px; background-color: #202123; -webkit-transform: translateY(-100%); transform: translateY(-100%); -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); } .snip1491 h2, .snip1491 h3, .snip1491 p { margin: 0; } .snip1491 h2, .snip1491 h3 { font-family: 'Slabo 27px', serif; line-height: 1.2em; } .snip1491 h2 { font-size: 1.2em; color: #35ADF9; } .snip1491 h3 { color: #EBEBEB; font-size: 1.0em; font-weight: normal; letter-spacing: 1px; } .snip1491 p { border-top: 1px solid rgba(255, 255, 255, 0.2); font-size: 0.7em; margin-top: 12px; padding: 12px 0 15px; line-height: 1.5em; } .snip1491 a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; } .snip1491:hover > img, .snip1491.hover > img { -webkit-transform: translateY(-100%); transform: translateY(-100%); } .snip1491:hover figcaption, .snip1491.hover figcaption { -webkit-transform: translateY(0%); transform: translateY(0%); } /* Demo purposes only */ body { background-color: #212121;}

Related: See More

Questions / Comments: