<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>Login-box nederst i høyre hjørne. (Bruker IKKE logget inn/registrert) Enten med margin til bim-objekt-bildene eller kliss inntil.</h2> <div class="main clearfix"> <a href="#"> <div class="wrapper clearfix"></div> <img src="https://cdn4.iconfinder.com/data/icons/browser-ui-small-size-optimized-set/154/user-login-human-man-body-512.png"> <div class="info"> <div class="col-md-12"> <div class="login-panel panel panel-default" style="background-color: #ccc;"> <div class="panel-body" style="padding: 0px;"> <p><strong>bimbear</strong>®.com</p> <form role="form"> <fieldset> <div class="form-group"> <input class="form-control" style="height:22px;" placeholder="E-mail" name="email" type="email" autofocus=""> </div> <div class="form-group" style="margin-bottom:5px;"> <input class="form-control" style="height:22px;" placeholder="Password" name="password" type="password" value=""> </div> <div class="checkbox" style="margin-top:0px; margin-bottom:0px;"> <label> <input name="remember" type="checkbox" value="Remember Me">Remember Me </label> </div> <!-- Change this to a button or input when using this as a form --> <button href="javascript:;" class="btn btn-sm btn-success">Login</button> </fieldset> </form> </div> </div> </div> </div> </a> </div> </div> </div> <div class="container"> <div class="row"> <h2>Login-box nederst i høyre hjørne. (Bruker logget inn/registrert) Enten med margin til bim-objekt-bildene eller kliss inntil.</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>Kildevangen Arkitekter</p> <p>Trondheim Rocket Center</p> <p>User Profile</p> <p>Favorites</p> </div> </a> </div> </div> </div>

body { font-family: "Avenir"; } .panel-default { border-color: #ccc; } .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 #fff #fff #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:17px; padding-top:35px; background:#ccc; opacity:0; transition: all 0.8s ease-in-out 0s; backface-visibility:hidden; color: black; } .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; }