<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> <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 id="loginbox" class="login-panel panel panel-default" style="background-color: #ccc;"> <div class="panel-body" style="padding: 0px;"> <p> Login to:<br><strong>bimbear</strong>®.com</p> <form role="form"> <fieldset> <div class="form-group"> <input class="form-control" placeholder="E-mail" name="email" type="email" autofocus=""> </div> <div class="form-group" style="margin-bottom:5px;"> <input class="form-control" 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> </fieldset> </form> <!-- Change this to a button or input when using this as a form --> <button href="javascript:;" class="btn btn-sm btn-success">Login</button> <button href="#" onclick="$('#loginbox').hide(); $('#signupbox').show()" class="btn btn-sm btn-default">Register</button> </div> </div> <div id="signupbox" class="login-panel panel panel-default" style="display:none; background-color: #ccc; margin-top: -16px; border-radius: 40px;"> <div class="panel-body" style="padding: 0px;"> <p><strong>New</strong> User</p> <form role="form"> <fieldset> <div class="form-group"> <input class="form-control" placeholder="First Name" name="firstname" type="text" autofocus=""> </div> <div class="form-group"> <input class="form-control" placeholder="Last Name" name="lastname" type="text" value=""> </div> <div class="form-group"> <input class="form-control" placeholder="Business" name="biz" type="text" value=""> </div> <div class="form-group"> <input class="form-control" placeholder="Email" name="email" type="email" value=""> </div> <div class="form-group"> <input class="form-control" placeholder="Password" name="passwd" type="password" value=""> </div> <div class="form-group"> <input class="form-control" placeholder="Repeat Password" name="r-passwd" type="password" value=""> </div> <button class="btn btn-success">Sign up</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<br><strong>Trondheim ERKE-tech</strong><br>Gyldne Gaas</p> </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"> <div class="main" style="transform: scale(0.3);"> <div class="wrapper clearfix"></div> <div class="info"> </div> </div> <div class="main2 clearfix" style="transform: scale(0.3);"> <div class="wrapper clearfix"></div> <div class="info">COCK </div> </div> </div> </a> </div> </div> </div>

body { font-family: "Avenir"; } .panel { margin-bottom: 1px; } .panel-default { border-color: #ccc; } .main { position:relative; width:220px; height:220px; border-radius:50%; } .main .wrapper { width: 225px; height: 225px; border-width: 5px; 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:27px; background:#ccc; opacity:0; transition: all 0.8s ease-in-out 0s; backface-visibility:hidden; color: black; } .form-control { height:18px; font-size: 10px; } .form-group { margin-bottom:3px; } .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; } .main2 { position:relative; width:220px; height:220px; border-radius:50%; } .main2 .wrapper { width: 225px; height: 225px; 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; } .main2 img, .main2 .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; } .main2 .info { text-align:center; padding:17px; padding-top:27px; background:#ccc; opacity:0; transition: all 0.8s ease-in-out 0s; backface-visibility:hidden; color: black; } .form-control { height:18px; font-size: 10px; } .form-group { margin-bottom:3px; } .main2 a:hover .wrapper { transform:rotate(180deg); transition: all 0.8s ease-in-out 0s; } .main2 a:hover img { opacity:0; transition: all 0.8s ease-in-out 0s; } .main2 a:hover .info { opacity:1; transition: all 0.8s ease-in-out 0s; }