Efek Hover 3

Wildan
Andriana

Selamat Datang di Blog Wildan
Blog ini saya dirikan dengan tujuan untuk kalangan sendiri dan sedikit berbagi informasi, semoga bermanfaat.

Untuk Membuat Contoh Diatas Kodenya Adalah Sebagai Berikut:

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjplrltUlIIha9BMvvejL8NmOI6SpB3VowBBEz1SXmlM7lRWEdK_6AhYybjaxl_XNvEY7qsv8wmbxJMXWtf743wsVOzHNH4biFoGCUlDEEfoq6SctCpeJeeEqvZu0LDxdHTfjcwMV_rF12Y/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp1x4XtsnKuZgynwjqTbOZ6yuiU7na14QYvu8U4aGbLwCOAV9aeTz8aiu-dAPgpCQGgv6jquXJqwepr9VNBLnFH0HWi0NjlUIifyOno4Yw45S_9aQgtV3tzB9M2u-8_WoLP28QY66Ujefk/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>