<center class="titleBlock">
  <h1 class="Sitetitle">Our Works</h1>
  <p>
    <b>Hover the Image to see the effect</b><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </p>
</center>

<div class="row">
  
  <div class="col-lg-10 col-md-10 col-sm-12 col-xs-12 col-lg-offset-1 col-md-offset-1">
  
  <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
    <center>
    <div class="displayWrapper">
      <div class="displayBox">
        <img src="http://aarvic.com/images/DUMMY/FullView1.png" alt="image1"/>
      </div>
    </div>
      <h4>Boosted Board</h4>
    </center>
  </div>
  
  <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
    <center>
    <div class="displayWrapper">
      <div class="displayBox">
        <img src="http://aarvic.com/images/DUMMY/1.jpg" alt="image1"/>
      </div>
    </div>
      <h4>Special App</h4>
    </center>
  </div>
    
  <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
    <center>
    <div class="displayWrapper">
      <div class="displayBox">
        <img src="http://aarvic.com/images/DUMMY/5.png" alt="image1"/>
      </div>
    </div>
      <h4>Taicos Kitchen</h4>
    </center>
  </div>
  
  <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
    <center>
    <div class="displayWrapper">
      <div class="displayBox">
        <img src="http://aarvic.com/images/DUMMY/3.jpg" alt="image1"/>
      </div>
    </div>
      <h4>Medical Prescription</h4>
    </center>
  </div>
  
  </div>  
    
</div>

@import url('https://fonts.googleapis.com/css?family=Raleway');

html , body
{
  height:100%;
  width:100%;
  background:#f1f1f1;
  font-family: 'Raleway', sans-serif;
  overflow-x:hidden;
}

.titleBlock
{
  width:70%;
  margin-left:15%;
}

.Sitetitle:before
{
  content:"";
  width:50px;
  height:2px;
  background:#000;
  position: absolute;
  margin-top:18px;
  margin-left:-60px;
}

.Sitetitle:after
{
  content:"";
  width:50px;
  height:2px;
  background:#000;
  position: absolute;
  margin-top:18px;
  margin-left:8px;
}

.displayWrapper
{
  box-shadow: 0 0 15px rgba(0,0,0,0.6);
  padding: 10px;
  width:320px;
  margin-top:20px;
}
.displayBox
{
  width:300px;
  height:300px;
  overflow: hidden;   
}
.displayBox img
{
  width:100%;
  -webkit-transition: all 5s ease;
    transition: all 5s ease;
  position:relative;
}
.displayBox img:hover
{
  cursor:pointer;
   transform: translateY(-83.7%);
}

/*Nope, Not today*/