Css：

.spinner{
width:245px;
height:245px;
position:relative;
}
.coly{
border-radius:130px;
font-size:19px;
background:#333;
border:10px solid #ecab18;
border-right-color:#1ad280;
border-bottom-color:#1ad280;
width:230px;
height:230px;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.imgT{
position:absolute;
top: 10px;
left: 10px;
border-radius:120px;
width:230px;
overflow: hidden;
height:230px;

}
.spinner:hover .coly{
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.info-back{
opacity: 0;
display: block;
width: 100%;
position:absolute;
top:0;
color:#fff;
height: 100%;
text-align: center;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

.info-back:hover{
opacity:1;
}

.info-back h3{
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0 0;
height: 55px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.info-back 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);
}

html代码：

 <div class="spinner">

            <div class="coly">

            </div>

            <div class="imgT">

<img src="http://www.gbtags.com/gb/networks/uploads/0f8c4c4d-f612-4476-bfa4-fa49a461fb08/ihover-gh-pages/dist/images/assets/2.jpg"/>

            </div>    

            <div class="info-back">

                <h3>Heading here</h3>

                <p>Description goes here</p>

            </div>

        </div>