<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"> <span class="actions"> <span class="project-details">Mélamine Tafisa</span> </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"> <span class="actions"> <span class="project-details">Bandes de chant en ABS / PVC</span> </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"> <span class="actions"> <span class="project-details">Bandes de chant en polyester</span> </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"> <span class="actions"> <span class="project-details">Bandes de chant en mélamine</span> </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"> <span class="actions"> <span class="project-details">Bandes de chant en bois véritable</span> </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"> <span class="actions"> <span class="project-details">Mélamine Tafisa</span> </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"> <span class="actions"> <span class="project-details">Bandes de chant en ABS / PVC</span> </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"> <span class="actions"> <span class="project-details">Bandes de chant en polyester</span> </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"> <span class="actions"> <span class="project-details">Bandes de chant en mélamine</span> </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"> <span class="actions"> <span class="project-details">Bandes de chant en bois véritable</span> </span> </figure> </div> </div> </div> </div>

.project { margin-bottom: 30px; vertical-align: top; margin-right: 30px; float: left; cursor: pointer; width:100%; } .project figure { position: relative; display: inline-block; } .project figure img { width: 100%; } .project figure:hover figcaption { background:#d81e05; } .project figure:hover figcaption .project-details { color: #fff; } .project figure:hover .actions { background-color: rgba(216,30,5,.8); top: 0%; font-size:2.3em; font-weight:700; padding-top:10%; } .project figure .actions { display: table-cell; position: absolute; bottom: 0px; top: 50%; left:0; right:0; z-index: 1; opacity: 1; background-color: rgba(29,29,29,.5); -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; color:#fff; font-size:2em; padding:2%; font-weight:400; text-align:center; vertical-align: middle; } @media (min-width: 992px) { .project figure .actions { top: 60%; left:0; right:0; font-size:1.5em; padding:2%; } .project figure:hover .actions { top: 0%; font-size:2em; padding-top:20%; } } @media (min-width: 1200px) { .project figure .actions { top: 65%; left:0; right:0; font-size:1.1em; padding:2%; font-weight:400; } .project figure:hover .actions { top: 0%; font-size:1.5em; padding-top:25%; } }