<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 ----------> <figure class="snip0078 hover blue"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample4.jpg" alt="sampl45" /> <figcaption> <h2>Mark <span>Twain</span></h2> <p>Go to Heaven for the climate, Hell for the company.</p> </figcaption> <a href="#"></a> </figure> <figure class="snip0078 red"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample7.jpg" alt="sample50" /> <figcaption> <h2>Steven <span>Wright</span></h2> <p>You can't have everything... where would you put it?</p> </figcaption> <a href="#"></a> </figure> <figure class="snip0078 yellow"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample6.jpg" alt="sample46" /> <figcaption> <h2>Arthur C. <span> Clarke</span></h2> <p>There is hopeful symbolism in the fact that flags do not wave in a vacuum.</p> </figcaption> <a href="#"></a> </figure>

@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800); figure.snip0078 { font-family: 'Raleway', Arial, sans-serif; color: #fff; position: relative; float: left; margin: 10px 1%; min-width: 220px; max-width: 310px; max-height: 310px; width: 100%; text-align: center; } figure.snip0078 * { -webkit-box-sizing: padding-box; box-sizing: padding-box; } figure.snip0078 img { opacity: 1; max-width: 100%; border: 10px solid #000000; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-transform: scale(0.85); transform: scale(0.85); -webkit-transform-origin: 0 0; transform-origin: 0 0; } figure.snip0078 figcaption { bottom: 0; width: 60%; right: 0; position: absolute; background: #000000; padding: 20px; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-transform: translateY(0); transform: translateY(0); box-shadow: 0 0px 10px -10px #000000; } figure.snip0078 figcaption h2, figure.snip0078 figcaption p { margin: 0; color: #ffffff; } figure.snip0078 figcaption h2 { font-weight: 400; text-transform: uppercase; } figure.snip0078 figcaption h2 span { font-weight: 800; } figure.snip0078 figcaption p { font-size: 0.9em; font-weight: 500; opacity: 0.65; } figure.snip0078 a { left: 0; right: 0; top: 0; bottom: 0; position: absolute; z-index: 1; } figure.snip0078.blue figcaption { background: #1b557a; } figure.snip0078.blue img { border: 10px solid #1b557a; } figure.snip0078.red figcaption { background: #81261d; } figure.snip0078.red img { border: 10px solid #81261d; } figure.snip0078.yellow figcaption { background: #a85913; } figure.snip0078.yellow img { border: 10px solid #a85913; } figure.snip0078:hover figcaption, figure.snip0078.hover figcaption { -webkit-transform: translateY(-8px); transform: translateY(-8px); box-shadow: 0 15px 15px -15px #000000; } figure.snip0078:hover.blue img, figure.snip0078.hover.blue img { border: 10px solid #2980b9; } figure.snip0078:hover.red img, figure.snip0078.hover.red img { border: 10px solid #c0392b; } figure.snip0078:hover.yellow img, figure.snip0078.hover.yellow img { border: 10px solid #e67e22; }