<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 ----------> <figure class="footer"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample99.jpg" alt="sample99" /> <figcaption> <h3>john doe</h3> <h4>Luxery</h4> </figcaption> <a href="#"></a> </figure> <figure class="footer hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample109.jpg" alt="sample109" /> <figcaption> <h3>john doe</h3> <h4>Classic</h4> </figcaption> <a href="#"></a> </figure> <figure class="footer"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample117.jpg" alt="sample117" /> <figcaption> <h3>john doe</h3> <h4>Vintage</h4> </figcaption> <a href="#"></a> </figure>

@import url(https://fonts.googleapis.com/css?family=Montserrat:200); .footer { font-family: 'Montserrat', Arial, sans-serif; position: relative; display: inline-block; overflow: hidden; margin: 8px; min-width: 230px; max-width: 315px; width: 100%; color: #fff; text-align: left; font-size: 16px; background: #000; } .footer *, .footer:before, .footer:after { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .footer img { max-width: 100%; backface-visibility: hidden; vertical-align: top; } .footer:before, .footer:after { position: absolute; top: 20px; right: 20px; content: ''; background-color: #fff; z-index: 1; opacity: 0; } .footer:before { width: 0; height: 1px; } .footer:after { height: 0; width: 1px; } .footer figcaption { position: absolute; left: 0; bottom: 0; padding: 15px 20px; } .footer h3, .footer h4 { margin: 0; font-size: 1.1em; font-weight: normal; opacity: 0; } .footer h4 { font-size: .8em; text-transform: uppercase; } .footer a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; } .footer:hover img, .footer.hover img { zoom: 1; filter: alpha(opacity=20); -webkit-opacity: 0.2; opacity: 0.2; } .footer:hover:before, .footer.hover:before, .footer:hover:after, .footer.hover:after { opacity: 1; -webkit-transition-delay: 0.25s; transition-delay: 0.25s; } .footer:hover:before, .footer.hover:before { width: 40px; } .footer:hover:after, .footer.hover:after { height: 40px; } .footer:hover h3, .footer.hover h3, .footer:hover h4, .footer.hover h4 { opacity: 1; } .footer:hover h3, .footer.hover h3 { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .footer:hover h4, .footer.hover h4 { -webkit-transition-delay: 0.35s; transition-delay: 0.35s; } /* Demo purposes only */ body { background-color: #212121; text-align: center; }