<style type="text/css">
body{background:#333;background-size:cover;color:#ccc;height:100%;overflow:visible}
#tagBlogger {
width:100px;
margin:30px auto;
float:left;
border-radius:50%}
.container {
width:70px;
height:70px;
margin:0 0 30px 10px;
position:relative;
border-radius:60px;
background:rgba(255,255,255,.2);
box-shadow:3px 3px 5px rgba(0,0,0,.2);
transition:all .5s;
-webkit-transition:all .5s;
-moz-transition:all .5s;
-ms-transition:all .5s;
-o-transition:all .5s;
overflow:hidden}
.photo {
width:50px;
height:50px;
margin:8px;
border-radius:50%;
position:absolute;
left:0px;
overflow:hidden;
border:2px solid white;
top:0}
.pic{max-width:100%}
.buttonLogo {
width:50px;
height:50px;
position:absolute;
right:10px;
top:10px;
border-radius:50%;
box-shadow:0 0 0 1px rgba(0,0,0,.3),
0 0 0 5px rgba(255,255,255,.3),
0 0 0 6px rgba(0,0,0,.3);
transition:all .5s;
-webkit-transition:all .5s;
-moz-transition:all .5s;
-ms-transition:all .5s;
-o-transition:all .5s;
cursor:pointer;
background:url(https://lh3.googleusercontent.com/-HJgeo9HXPPA/VMr6MCBbpzI/AAAAAAAAA9w/2RyYdFRPn7w/s100-no/fotowildan-2.jpg) no-repeat center center;}
.buttonLogo:hover {
box-shadow:0 0 0 1px rgba(0,0,0,.3),
0 0 0 5px #5ca321,
0 0 0 6px rgba(0,0,0,.3);}
.name{
height:50%;
width:100px;
position:absolute;
right:25px;
padding:5px;
font:15px arial;
color:white;
opacity:0;
transition:all .5s .5s;
-webkit-transition:all .5s .5s;
-moz-transition:all .5s .5s;
-ms-transition:all .5s .5s;
-o-transition:all .5s .5s;
text-shadow:1px 2px 3px #111;
top:0}
.small {font-size:12px; display:block; margin-top:2px; }
.comment {
width:210px;
position:relative;
padding:5px;
font-size:13px;
color:white;
border-radius:10px;
background:rgba(255,255,255,.4);
box-shadow:3px 3px 5px rgba(0,0,0,.2);
opacity:0;
transition:all 1s;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
border-bottom:20px solid #080}
.comment:before {
content:'';
width:0;
height:0;
position:absolute;
bottom:100%;
left:2%;
border-bottom:15px solid rgba(255,255,255,.4);
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:15px solid transparent}
.container:hover{width:210px}
.container:hover .name,.container:hover + .comment{opacity:1}
</style>
<h2>My Family</h2>
<div id="tagBlogger"><div class="container"><a class="buttonLogo" href="#" target="_blank" title="Amarajen"></a><br />
<div class="name">Enjen<br />
<span class="small">Amarajen</span><br />
</div><div class="photo"><img src="https://lh3.googleusercontent.com/-JMR4TmAx7vw/VMr6MaM4OhI/AAAAAAAAA90/BbG6F7vptaA/s100-no/fotowildan-1.jpg" alt="Enjen, S.Pd.I." class="pic" /><br />
</div></div><p class="comment">Selamat Datang di Blog Wildan<br />
<span style="font:italic 12px/normal Verdana,serif">Blog ini saya dirikan dengan tujuan untuk kalangan sendiri dan sedikit berbagi informasi, semoga bermanfaat.</span></p></div>
<div style='clear: both;'></div>
00.22
By
Honey Bee Indonesia
Sobat sedang membaca artikel tentang 
0 komentar: