<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <div class="container"> <hr class="divider-title"> <div class="row"> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <div class="project"> <figure class="img-responsive"> <img src="http://dev.cybercat.ca/commonwealth/images/1000006_230x230.jpg"> <figcaption> <span class="project-details">Mélamine Tafisa</span> </figcaption> <span class="actions"> <button class="btn btn-danger bnt-action" type="submit" >Afficher</button> </span> </figure> </div> </div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <div class="project"> <figure class="img-responsive"> <img src="http://dev.cybercat.ca/commonwealth/images/1000568_230x230.jpg"> <figcaption> <span class="project-details">Bandes de chant en ABS / PVC</span> </figcaption> <span class="actions"> <button class="btn btn-danger bnt-action" type="submit" >Afficher</button> </span> </figure> </div> </div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <div class="project"> <figure class="img-responsive"> <img src="http://dev.cybercat.ca/commonwealth/images/1000569_230x230.jpg"> <figcaption> <span class="project-details">Bandes de chant en polyester</span> </figcaption> <span class="actions"> <button class="btn btn-danger bnt-action" type="submit" >Afficher</button> </span> </figure> </div> </div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <div class="project"> <figure class="img-responsive"> <img src="http://dev.cybercat.ca/commonwealth/images/1000571_230x230.jpg"> <figcaption> <span class="project-details">Bandes de chant en mélamine</span> </figcaption> <span class="actions"> <button class="btn btn-danger bnt-action" type="submit" >Afficher</button> </span> </figure> </div> </div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <div class="project"> <figure class="img-responsive"> <img src="http://dev.cybercat.ca/commonwealth/images/1000572_230x230.jpg"> <figcaption> <span class="project-details">Bandes de chant en bois véritable</span> </figcaption> <span class="actions"> <button class="btn btn-danger bnt-action" type="submit" >Afficher</button> </span> </figure> </div> </div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <div class="project"> <figure class="img-responsive"> <img src="http://dev.cybercat.ca/commonwealth/images/1000006_230x230.jpg"> <figcaption> <span class="project-details">Mélamine Tafisa</span> </figcaption> <span class="actions"> <button class="btn btn-danger bnt-action" type="submit" >Afficher</button> </span> </figure> </div> </div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <div class="project"> <figure class="img-responsive"> <img src="http://dev.cybercat.ca/commonwealth/images/1000572_230x230.jpg"> <figcaption> <span class="project-details">Mélamine Tafisa</span> </figcaption> <span class="actions"> <button class="btn btn-danger bnt-action" type="submit" >Afficher</button> </span> </figure> </div> </div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <div class="project"> <figure class="img-responsive"> <img src="http://dev.cybercat.ca/commonwealth/images/1000006_230x230.jpg"> <figcaption> <span class="project-details">Mélamine Tafisa</span> </figcaption> <span class="actions"> <button class="btn btn-danger bnt-action" type="submit" >Afficher</button> </span> </figure> </div> </div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <div class="project"> <figure class="img-responsive"> <img src="http://dev.cybercat.ca/commonwealth/images/1000572_230x230.jpg"> <figcaption> <span class="project-details">Mélamine Tafisa</span> </figcaption> <span class="actions"> <button class="btn btn-danger bnt-action" type="submit" >Afficher</button> </span> </figure> </div> </div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <div class="project"> <figure class="img-responsive"> <img src="http://dev.cybercat.ca/commonwealth/images/1000006_230x230.jpg"> <figcaption> <span class="project-details">Mélamine Tafisa</span> </figcaption> <span class="actions"> <button class="btn btn-danger bnt-action" type="submit" >Afficher</button> </span> </figure> </div> </div> </div> </div>

.divider-title{ border:1px solid #dddddd; } .project { margin-bottom: 30px; vertical-align: top; margin-right: 30px; float: left; cursor: pointer; width:100%; } .project figure { position: relative; display: inline-block; /*width: 283px; -moz-box-shadow: 0 3px 0 #e2e2e2,transparent 0 0 0; -webkit-box-shadow: 0 3px 0 #e2e2e2,transparent 0 0 0; box-shadow: 0 3px 0 #e2e2e2,transparent 0 0 0; -webkit-box-shadow: 0 3px 0 #e2e2e2; -moz-box-shadow: 0 3px 0 #e2e2e2; box-shadow: 0 3px 0 #e2e2e2;*/ } .project figure figcaption { position: relative; z-index: 10; padding: 8px 18px 11px; background: #eaeaea; -ms-transition: all .2s ease-out; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; text-align: center; color: #555; height:68px; } .project figure:hover .actions { opacity: 1; } .project figure .actions { display: block; position: absolute; bottom: 68px; top: 0; left:0; right:0; z-index: 1; opacity: 0; background-color: rgba(29,29,29,.7); -ms-transition: all .2s ease-out; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; border: 2px solid #d81e05; } .project figure img { border: 2px solid #eaeaea; width: 100%; } .btn-warning bnt-action{ margin: 0% 0% auto; } figcaption .project-details { display: block; font-size: 16px; /*line-height: 33px;*/ color: #000; /*height: 27px;*/ width: 100%; margin: 0 auto 5px auto; /*margin-bottom: 5px;*/ overflow: hidden; } .project figure:hover figcaption { background:#d81e05; } .project figure:hover figcaption .project-details { color: #fff; } figcaption .project-price { position: absolute; right: 15px; top: 12px; font-size: 22px; text-align: right; margin-top: 8px; letter-spacing: -1px; -webkit-font-smoothing: antialiased; } figcaption .project-creator { font-size: 13px; color: #545454; display: block; } figcaption .project-creator { font-size: 13px; color: #545454; display: block; } .project figure .actions button { padding: 13px 20px; font-size: 16px; top: 32%; position: absolute; left: 50%; width: 90%; margin-left: -45%; line-height: 18px; letter-spacing: 1px; } .row.is-flex { display: flex; flex-wrap: wrap; } .row.is-flex > [class*='col-'] { display: flex; flex-direction: column; } .is-flex .box { background: none; position: static; } .is-flex [class*="col-"] { background: #fff; }