CSS3鼠标悬停图片动画

鼠标放到图片上后：

demo地址：demo

div：

     <div class="wai">
         <a href="#">
             <div class="spinner"></div>
             <div class="img">
                 <img src="data:images/example.png" alt="img">
             </div>
             <div class="info">
                 <div class="info-back">
                     <h3>Heading here</h3>
                     <p>Description goes here</p>
                 </div>
             </div>
         </a>
     </div>

css:

         .wai{
             height: 220px;
             position: relative;
             width: 220px;
         }
         .wai * {
             box-sizing: border-box;
         }

         /*圆形边框*/
         .wai .spinner{
             border-color: #e53aec #74b9d2 #74b9d2 #e234ec; /*上右下左的边框颜色*/
             border-image: none;
             border-radius: 50%;
             border-style: solid;
             border-width: 10px;
             height: 230px;
             transition: all 0.8s ease-in-out 0s;
             width: 230px;
         }

         /*图片*/
         .wai .img::before {
             display: none;
             border-radius: 50%;
             box-shadow: 0 0 0 16px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
             content: "";
             height: 100%;
             position: absolute;
             transition: all 0.35s ease-in-out 0s;
             width: 100%;
         }
         .wai .img {
             border-radius: 50%;
             bottom:;
             height: auto;
             left: 10px;
             position: absolute;
             right:;
             top: 10px;
             width: auto;
             vertical-align: middle;
         }
         .wai .img img {
             border-radius: 50%;
             height: 100%;
             width: 100%;

         }

         /*下方文字的设置*/

         .wai .info {
             background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
             bottom:;
             left: 10px;
             opacity:;
             right:;
             top: 10px;
             transition: all 0.8s ease-in-out 0s;
         }
         .info {
             backface-visibility: hidden;
             border-radius: 50%;
             bottom:;
             left: 0px;
             position: absolute;
             right:;
             text-align: center;
             top: 0px;
         }
         .wai .info p {
             color: #bbb;
             padding: 10px 5px;
             font-style: italic;
             margin: 0 30px;
             font-size: 12px;
             border-top: 1px solid rgba(255, 255, 255, 0.5);
         }
         .wai .info h3 {
             color: #fff;
             text-transform: uppercase;
             position: relative;
             letter-spacing: 2px;
             font-size: 22px;
             margin: 0 30px;
             padding: 55px 0 0 0;
             height: 110px;
             text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
         }

         /*hover后的动作---*/
         .wai a:hover {
             text-decoration: none;
         }
         .wai a:hover .spinner {
             -webkit-transform: rotate(180deg);
             -moz-transform: rotate(180deg);
             -ms-transform: rotate(180deg);
             -o-transform: rotate(180deg);
             transform: rotate(180deg);
         }

         .wai a:hover .info {
             opacity:;
         }