Cacher is the code snippet organizer for pro developers

<div id="buttons">


<div class="butFrame" onclick="window.location='#'">
    <div class="butText">TITLE</div>   
    <div class="butImage"><img src="_gb1.jpg" alt="" /></div>     
</div>

<div class="butFrame" onclick="window.location='#'">
    <div class="butText">TITLE</div>   
    <div class="butImage"><img src="_gb2.jpg" alt="" /></div>     
</div>

<div class="butFrame" onclick="window.location='#'">
    <div class="butText">TITLE</div>   
    <div class="butImage"><img src="_gb3.jpg" alt="" /></div>     
</div>

<div class="butFrame" onclick="window.location='#'">
    <div class="butText">TITLE</div>   
    <div class="butImage"><img src="_gb4.jpg" alt="" /></div>     
</div>


</div>

#buttons{
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-flex-direction: row;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   -ms-flex-direction: row;
    flex-direction: row;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
    justify-content: space-between; 
    -webkit-flex-flow:row wrap;
    -ms-flex-flow:row wrap;
    flex-flow:row wrap;
}


.butFrame {
    width:24%; /* Change This Dependong On How Many Buttons You Have*/
    position:relative;
    cursor:pointer;
        -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;
}

.butImage {
    width:100%;
    display:block;
}

.butImage img {
    width:100%;
    height:auto;
    display:block;
}

.butText{
    display:block;
    width:100%;
    font-size:1em;
    line-height:1.4em;
    color:#fff;
    background:rgba(0,0,0,.8);
    padding:0px 5px;
    height:30px;
    position:absolute;
    bottom:0px;
    left:0px;

    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;   

   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;

   -webkit-flex-direction: row;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   -ms-flex-direction: row;
    flex-direction: row;

   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
    align-items: center;

   -webkit-justify-content: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
    justify-content: center;
}



/* ----------------
HOVER STYLES
------------------ */

.butFrame *{
    -moz-transition:.5s;
    -webkit-transition:.5s;
    -ms-transition:.5s;
    -o-transition:.5s;
    transition:.5s;
}

.butFrame:hover{

}

.butFrame:hover .butText{
    height:100%;
    background:rgba(0,0,0,.5);
}

.butFrame:active .butText{
    background:rgba(0,0,0,.8);
}