<div class="picture"><img id="saturate" src="https://lh5.googleusercontent.com/-it2OdBAdbWg/VG209NqkyGI/AAAAAAABM0g/aWvzpP1FFTw/w62-h68-no/1.gif" alt="" />
<h4 class="name">Saturate</h4>
</div>
<div class="picture"><img id="grayscale" src="https://lh5.googleusercontent.com/-it2OdBAdbWg/VG209NqkyGI/AAAAAAABM0g/aWvzpP1FFTw/w62-h68-no/1.gif" alt="" />
<h4 class="name">Grayscale</h4>
</div>
<div class="picture"><img id="brightness" src="https://lh5.googleusercontent.com/-it2OdBAdbWg/VG209NqkyGI/AAAAAAABM0g/aWvzpP1FFTw/w62-h68-no/1.gif" alt="" />
<h4 class="name">Brightness</h4>
</div>

<style type="text/css"><!--
body{
  font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
  background-color: #DDD;
}
/*Heading*/
h1{
  text-align:center;
  color:#444;
  font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
  margin-top:40px
}
/*Container for images*/
#main{
  width:460px;
  margin:0 auto;
}
 
.picture{
  position:relative;
  float:left;
 clear:none;
 overflow:hidden;
 margin:10px auto
}
 
.picture img{
  position:relative;
  z-index:1;
 height:100px;
 width:100px;
 margin:0 10px;
}
/*Images Description*/
.picture .name{

  display:block;
  position:absolute;
  width:100%;
  top:150px;
  left:0;
  z-index:2;
  text-align:center;
  opacity:0.5;
  color:#333;
}
 
/*Effects using Filters*/
#saturate:hover{-webkit-filter: saturate(4.5);}
#grayscale:hover{-webkit-filter: grayscale(1);}
#brightness:hover{-webkit-filter: brightness(2);}
  /*For mobile devices*/
@media only screen and (max-width: 480px) { 
 
h1{font-size:20pt;margin-top:40px}
 
#main{
  width:240px;
  margin:0 auto;
}
 
.picture img{
  height:100px;
  width:100px;
}
 
.picture .name{
  top:65px;
  font-size:10pt;
}
}
--></style>