< http://cssdeck.com/labs/profile-interface Created by balapa95 HTML Created by... -

13.03.2015

<

http://cssdeck.com/labs/profile-interface

Created by balapa95

HTML

<div class=container>
   <div class=nama>
   <h3>Created by balapa95</h3>
 </div><img class=me src="https://lh3.googleusercontent.com/-NhjadQ0xxTU/VJQfrCl4kxI/AAAAAAABREg/-lIzr86dUW4/w240-h300-no/4-240x300.gif" alt=" " /></div>

CSS

<style type="text/css"><!
 * {
  margin:0px;
  padding:0px;
}

.container {
  background-color:#fff;
  width:270px;
  z-index:2;
  display:block;
  margin:130px auto;
  position:relattive;
  padding-top:10px;
  border-radius:5px;
}

.nama {
  width:270px;
  display:block;
  z-index:-2;
  position:absolute;
  left:50%;
  margin:-15px 0px;
   transition:0.3s all ease-out;
}

.nama h3 {
  left:-50%;
  color:white;
  font-size:16px;
  position:relative;
  text-align:center;
  background:#c4c7c2;
  line-height:50px;
  border-top-left-radius:5px;
  border-top-right-radius:5px;
}

.container:hover .nama {
  margin:-55px 0;
}

.container:hover .me {
  transform:scale(1.05);
}

.me {
  border-radius:10%;
  border: 1px dotted #fff;
  width:50%;
  display:block;
  margin:0 auto;
  margin-top:20px;
  transform:scale(.95);
  transition:.3s all ease;
}
 --></style>