z.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>图片悬停效果</title>
  <style>
   
    figure{
        width:500px;
        height:400px;
        border:10px solid white;
        box-shadow:0px 0px 10px green;
        overflow:hidden;
        transform:scale(1);
    }
    figure img{
        transform:scale(1);
        transition:all .3s;
    }
    figure:hover img{
        transform:scale(1.5);
    }
    figure figcaption{
        position:absolute;
        bottom:0;
        z-index:10;
        width:100%;
        height:50px;
        color:rgba(0,0,0,0);
        text-align:center;
        line-height:30px;
        transition:color 1s, background-color .5s;
    
    }
    figure:hover figcaption{
        color:black;
      font-weight:bold;
        background-color:pink;
      opacity:0.3;
      transform:rotate(360deg);
    }
  </style>
</head>
<body>
  <div>
    <figure>
      <img src="http://img3.chinaface.com/original/11237tJ5qjng202HsSSj2ZHforVgQ.jpg" alt="">
    </figure>
  </div>
</body>
</html>