<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> <div class="main clearfix"> <a href="#"> <div class="wrapper clearfix"></div> <img src="http://astra-hc.com/images/nina.jpg"> <div class="info"> <h3>Naim Ansari</h3> <p>fdfdddddddddd fdfddddddd</p> </div> </a> </div> </div> </div>

.main { position:relative; width:220px; height:220px; border-radius:50%; } .main .wrapper { width: 230px; height: 230px; border-width: 10px; border-style: solid; border-color: #000 #f33 #f33 #000; border-radius: 50%; transition: all 0.8s ease-in-out 0s; posistion:absolute; top:0; left:0; } .main img, .main .info { position:absolute; top:10px; right:0; bottom:0; left:10px; border-radius:50%; width:210px; height:210px; transition: all 0.8s ease-in-out 0s; } .main .info { text-align:center; padding:10px; padding-top:50px; background:#ccc; opacity:0; transition: all 0.8s ease-in-out 0s; backface-visibility:hidden; } .main a:hover .wrapper { transform:rotate(180deg); transition: all 0.8s ease-in-out 0s; } .main a:hover img { opacity:0; transition: all 0.8s ease-in-out 0s; } .main a:hover .info { opacity:1; transition: all 0.8s ease-in-out 0s; }