Ajax Loader
HTML 
<!DOCTYPE html>
1
<!DOCTYPE html>
2
 
3
<html>
4
<head>
5
    <title>Profile Expand</title>
6
</head>
7
 
8
<body>
9
    <p><span>"Profile Expand"</span> inspired by this <a href=
10
    "http://drbl.in/hONm">dribbble shot</a></p>
11
 
12
    <div id="box">
13
        <input id="profile" type="checkbox" checked>
14
        <label for="profile">
15
        <img src="http://developer.jmbarcelon.com/img/profile.jpg"alt="img">
16
        </label>
17
        <span class="entypo-twitter"></span>
18
        <span class="entypo-facebook-squared"></span>
19
 
20
        <div id="info">
21
          <span>03</span> <i>|</i> 12<br/>
22
            Jay Gatsby<br/>
23
            Millionaire
24
            <p class="entypo-dot-3"></p>
25
        </div>
26
    </div>
27
</body>
28
</html>
 
CSS 
@import url(http://weloveiconfonts.com/api/?family=entypo);
1
@import url(http://weloveiconfonts.com/api/?family=entypo);
2
 
3
/* entypo */
4
[class*="entypo-"]:before {
5
  font-family: 'entypo', sans-serif;
6
}
7
 
8
::selection {background:transparent;}
9
 
10
body{background:url(http://developer.jmbarcelon.com/img/blurredbackgreen.jpg)no-repeat;
11
background-size:140%;
12
font-family:helvetica;}
13
 
14
 
15
p {
16
    color: #fff;
17
    text-align: center;
18
}
19
p span {
20
    font-style: italic;
21
    color: #aaa;
22
}
23
p a {
24
    color: #EC5C93;
25
    font-weight: bolder;
26
    text-decoration: none;
27
}
28
p a:hover { text-decoration: underline }
29
 
30
#box {
31
  position:absolute;
32
  left:0;
33
  right:0;
34
  margin:50px auto;
35
  width:270px;
36
  height:250px;
37
  color:#fff;
38
}
39
input[type="checkbox"]{display:none;}
40
label{
41
  float:right;
42
  border:3px solid #fff;
43
  cursor:pointer;
44
  display:block;
45
  width:91px;
46
  height:106px;
47
  overflow:hidden;
48
  -webkit-transform:translateX(-170px);
49
  -moz-transform:translateX(-170px);
50
  -o-transform:translateX(-170px);
51
  transform:translateX(-170px);
52
  -webkit-transition:.5s;
53
  -moz-transition:.5s;
54
  -o-transition:.5s;
55
  transition:.5s;
56
}
57
label img{width:91px;}
58
 
59
input[type="checkbox"]:checked + label {
60
  -webkit-transform:translateX(0px);
61
  -moz-transform:translateX(0px);
62
  -o-transform:translateX(0px);
63
  transform:translateX(0px);
64
  -webkit-transition:.5s;
65
  -moz-transition:.5s;
66
  -o-transition:.5s;
67
  transition:.5s;
68
}
69
 
70
span[class*="entypo"] {
71
  cursor:pointer;
72
  float:right;
73
  font-size:38px;
74
  height:50px;
75
  width:0px;
76
  line-height:55px;
77
  padding:31px 17px;
78
  opacity:0;
79
  -webkit-transition:.5s;
80
  -moz-transition:.5s;
81
  -o-transition:.5s;
82
  transition:.5s;
83
}
84
 
85
#profile:checked ~ span[class*="entypo"] {
86
  text-align:center;
87
  opacity:1;
88
  width:50px;
89
  height:50px;
90
  -webkit-transition:.5s;
91
  -moz-transition:.5s;
92
  -o-transition:.5s;
93
  transition:.5s;
94
  }
95
span[class*="facebook"] {background:#2D75D0;}
96
span[class*="facebook"]:hover {
97
  background:rgba(46,120,209,0.5);}
98
span[class*="twitter"] {background:#30A4D1;}
99
span[class*="twitter"]:hover {
100
  background:rgba(48,164,209,0.5);}
101
 
102
#info {
103
  font-size:13px;
104
  width:91px;
105
  height:0px;
106
  padding:2px;
107
  color:#fff;
108
  z-index:-1;
109
  opacity:0;
110
  -webkit-transform:translateX(-170px);
111
  -moz-transform:translateX(-170px);
112
  -o-transform:translateX(-170px);
113
  transform:translateX(-170px);
114
}
115
 
116
#info span {
117
  font-size:30px;
118
  font-weight:Bolder;
119
}
120
#info i {font-weight:lighter;color:#eee;}
121
#info p {
122
    line-height:0;
123
    text-align:left;}
124
 
125
#profile:checked ~ #info {
126
  float:right;
127
  height:106px;
128
  padding:2px;
129
  color:#fff;
130
  opacity:1;
131
   -webkit-transform:translateX(0px);
132
  -moz-transform:translateX(0px);
133
  -o-transform:translateX(0px);
134
  transform:translateX(0px);
135
  -webkit-transition:.5s;
136
  -moz-transition:.5s;
137
  -o-transition:.5s;
138
  transition:.5s;
139
140
}
 

Profile Expand

CSSDeck G+