CSS3鼠标悬停图片动画

<div class="wai">
<a href="#">
<div class="spinner"></div>
<div class="img">
<img src="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>

.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: 0;
height: auto;
left: 10px;
position: absolute;
right: 0;
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: 0;
left: 10px;
opacity: 0;
right: 0;
top: 10px;
transition: all 0.8s ease-in-out 0s;
}
.info {
backface-visibility: hidden;
border-radius: 50%;
bottom: 0;
left: 0px;
position: absolute;
right: 0;
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: 1;
}