CSS3 Mouse hover Picture animation

After the mouse is placed on the picture:

Demo Address: Demo

Div:

1     <Divclass= "Wai">2         <ahref="#">3             <Divclass= "Spinner"></Div>4             <Divclass= "img">5                 <imgsrc= "Images/example.png"alt= "img">6             </Div>7             <Divclass= "Info">8                 <Divclass= "Info-back">9                     <H3>Heading here</H3>Ten                     <P>Description goes here</P> One                 </Div> A             </Div> -         </a> -     </Div>

Css:

1 . Wai{2 Height:220px;3 position:relative;4 width:220px;5}6 . Wai *{7 box-sizing:Border-box;8}9 Ten         /*Round Border*/ One . Wai. Spinner{ A Border-color:#e53aec #74b9d2 #74b9d2 #e234ec;/*Top Right bottom left border color*/ - Border-image:None; - Border-radius:50%; the Border-style:Solid; - Border-width:10px; - Height:230px; - transition:All 0.8s ease-in-out 0s; + width:230px; -} +  A         /*Image*/ at . 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%; in position:Absolute; - transition:All 0.35s ease-in-out 0s; to width:100%; +} - . Wai. IMG{ the Border-radius:50%; * Bottom:0; $ Height:Auto;Panax Notoginseng  Left:10px; - position:Absolute; the  Right:0; + Top:10px; A width:Auto; the vertical-align:Middle; +} - . Wai. img img{ $ Border-radius:50%; $ Height:100%; - width:100%; -  the} - Wuyi  the         /*settings for text below*/ -  Wu . Wai. Info{ - background:rgba (0, 0, 0, 0.6) None repeat scroll 0 0; About Bottom:0; $  Left:10px; - Opacity:0; -  Right:0; - Top:10px; A transition:All 0.8s ease-in-out 0s; +} the . Info{ - backface-visibility:Hidden; $ Border-radius:50%; the Bottom:0; the  Left:0px; the position:Absolute; the  Right:0; - text-align:Center; in Top:0px; the} the . Wai. Info P{ About Color:#bbb; the padding:10px 5px; the Font-style:Italic; the margin:0 30px; + font-size:12px; - Border-top:1px solid Rgba (255, 255, 255, 0.5); the}Bayi . Wai. Info h3{ the Color:#fff; the Text-transform:Uppercase; - position:relative; - letter-spacing:2px; the font-size:22px; the margin:0 30px; the padding:55px 0 0 0; the Height:110px; - Text-shadow:0 0 1px white, 0 1px 2px rgba (0, 0, 0, 0.3); the} the  the         /*the action---after hover*/94 . Wai A:hover{ the text-decoration:None; the} the . Wai A:hover. Spinner{98 -webkit-transform:Rotate (180deg); About -moz-transform:Rotate (180deg); - -ms-transform:Rotate (180deg);101 -o-transform:Rotate (180deg);102 Transform:Rotate (180deg);103}104  the . Wai A:hover. Info{106 Opacity:1;107}

CSS3 Mouse hover Picture animation