<div class="picture"><img id="contrast" src="https://lh5.googleusercontent.com/-it2OdBAdbWg/VG209NqkyGI/AAAAAAABM0g/aWvzpP1FFTw/w62-h68-no/1.gif" alt="" />
<h4 class="name">Contrast</h4>
</div>
<div class="picture"><img id="blur" src="https://lh5.googleusercontent.com/-it2OdBAdbWg/VG209NqkyGI/AAAAAAABM0g/aWvzpP1FFTw/w62-h68-no/1.gif" alt="" />
<h4 class="name">Blur</h4>
</div>
<div class="picture"><img id="hue_rotate" src="https://lh5.googleusercontent.com/-it2OdBAdbWg/VG209NqkyGI/AAAAAAABM0g/aWvzpP1FFTw/w62-h68-no/1.gif" alt="" />
<h4 class="name">Hue Rotate</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:660px;
 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*/
 
#contrast:hover{-webkit-filter: contrast(3);}
#blur:hover{-webkit-filter: blur(4px);}
#hue_rotate:hover{-webkit-filter: hue-rotate(150deg);}
#invert:hover{-webkit-filter: invert(1);}
#sepia:hover{-webkit-filter: sepia(1);}
#opacity:hover{-webkit-filter: opacity(0.5);}
#drop_shadow:hover{-webkit-filter:drop-shadow(0px 0px 10px rgba(0,0,0,.5));}
 
/*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;
}
 
.pictu