index.html

<div class="pic">
  <span class="title">Beauty</span>
  <img class="p" src="http://imgcdn.zcool.com.cn/img3/cover/5/59/c_m_1349759769511.jpg" alt="" />
</div>

style.css

body{margin:0;padding:0;  background: url('http://thecodeplayer.com/uploads/media/pxpat.png');}

.pic{
  width:250px;
  margin:25px auto;
  -webkit-box-shadow:2px 2px 2px 2px;
  position:relative;
}
.title{
  display:block;
  position:absolute;
  z-index:1;
  padding:3px;
  width:80px;
  left:0 ;top:150px;
  font-size:13px;
  font-weight:bold;
  background:rgba(0,0,0,0.5);
}
.pic img{
  margin:10px 0;
  -webkit-filter:grayscale(1);
  -webkit-transition:all 0.5s ;
}
.pic img:hover{
  -webkit-filter:none;
}