SOURCE

<div class="hover5">
   <a href="##">
    <img src="http://pic40.nipic.com/20140414/17922710_123056623115_2.jpg" alt="" />
    <div class="font">
      文字
   </div>
   </a>
</div>

.hover5{
  width:500px;
  height:250px;
  /* transform:translateZ(0); */
  overflow:hidden;
}
.hover5 a{
  display:block;
  width:100%;
  height:100%;
  position:relative;
}
.hover5 a img{
  width:100%;
}
.hover5 .font{
  width:100%;
  height:100%;
  text-align:center;
  line-height:250px;
  position:absolute;
  left:20;
  top:0;
  font-size:28px;
  color:#fff;
  background:rgba(0,0,0,0);
  border-radius:50%;
  transform:scale(0);
  transition:all 0.5s;
}
.hover5:hover .font{
  background:rgba(0,0,0,0.5);
  border-radius:0;
  transform:scale(1.5);
}