Cacher is the code snippet organizer for pro developers

<div id="buttons">


  <div class="butFrame" onclick="window.location='#'">
    <div class="butText">
    </div>

    <div class="butImage"><img src="http://lorempixel.com/output/city-q-g-640-480-7.jpg" alt="" /></div>


    <a href="#">Read More</a>
  </div>

  <div class="butFrame" onclick="window.location='#'">
    <div class="butText">
    </div>
    
               
    
    <div class="butImage"><img src="http://lorempixel.com/output/sports-q-g-640-480-5.jpg" alt="" /></div>

    <a href="#">Read More</a>
  </div>

  <div class="butFrame" onclick="window.location='#'">
    <div class="butText">

    </div>

    <div class="butImage"><img src="http://lorempixel.com/output/business-q-g-640-480-6.jpg" alt="" /></div>

    <a href="#">Read More</a>
  </div>

  <div class="butFrame" onclick="window.location='#'">
    <div class="butText">
    </div>
    <div class="butImage"><img src="http://lorempixel.com/output/nightlife-q-g-640-480-10.jpg" alt="" /></div>

    <a href="#">Read More</a>
  </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;
  font-family: arial;
}

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

.butFrame:nth-child(1):after {
  content: "sydney";
  top: 70px;
  left: -30px;
  z-index: 999;
  position: absolute;
  opacity: 0;
  color: #fff;
  font-size: 2em;
  text-transform: uppercase;
  font-weight: 900;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  -ms-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}

.butFrame:nth-child(2):after {
  content: "motocross";
  top: 70px;
  left: -30px;
  z-index: 999;
  position: absolute;
  opacity: 0;
  color: #fff;
  font-size: 2em;
  text-transform: uppercase;
  font-weight: 900;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  -ms-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}

.butFrame:nth-child(3):after {
  content: "office";
  top: 70px;
  left: -30px;
  z-index: 999;
  position: absolute;
  opacity: 0;
  color: #fff;
  font-size: 2em;
  text-transform: uppercase;
  font-weight: 900;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  -ms-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}

.butFrame:nth-child(4):after {
  content: "hipsters";
  top: 70px;
  left: -30px;
  z-index: 999;
  position: absolute;
  opacity: 0;
  color: #fff;
  font-size: 2em;
  text-transform: uppercase;
  font-weight: 900;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  -ms-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}

.butImage {
  width: 100%;
  display: block;
  background: orangered;
  border-radius: 10px;
  overflow: hidden;
}

.butImage img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 1;
  border-radius: 10px;
  overflow: hidden;
}

.butText {
  display: block;
  width: 100%;
  font-size: .95em;
  line-height: 1.4em;
  padding: 10px 5px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

.butText h3 {
  font-size: 1.7em;
  text-transform: uppercase;
  color: #333;
  margin-top: 40px;
  margin-left: -80px;
  font-weight: 700;
  position: absolute;
  opacity: 0;
  z-index: 99;
}

.butFrame a {
  position: absolute;
  opacity: 0;
  left: 20;
  bottom: 15px;
  width: 100%;
  display: block;
  padding: 25px;
  line-height: 1em;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.5);
  /*border-top:5px solid #fff;*/
  
  color: #fff;
  font-weight: 900;
  font-size: .8em;
  line-height: 1em;
  text-transform: uppercase;
  text-align: flex-start;
  text-decoration: none;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
}
/* ----------------
HOVER STYLES
------------------ */

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

.butFrame:nth-child(1):hover:after {
  content: "sydney";
  left: 30px;
  z-index: 999;
  position: absolute;
  opacity: 1;
}

.butFrame:nth-child(2):hover:after {
  content: "Motocross";
  left: 30px;
  z-index: 999;
  position: absolute;
  opacity: 1;
}

.butFrame:nth-child(3):hover:after {
  content: "office";
  left: 30px;
  z-index: 999;
  position: absolute;
  opacity: 1;
}

.butFrame:nth-child(4):hover:after {
  content: "hipsters";
  left: 30px;
  z-index: 999;
  position: absolute;
  opacity: 1;
}

.butFrame img:hover {
  opacity: 0.5;
  transform: scale(1.3, 1.3);
}

.butFrame:hover a {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  bottom: 35px;
  opacity: 1;
}

.butText h3:hover {
  margin-top: 40px;
  margin-left: 20px;
  opacity: 1;
}

.butFrame:active a {
  background: none;
}