dina's storylineʕ•ᴥ•ʔ: Floating Down Circle Hover:

#FANFIksi Refresh Author Stuff buddies

Floating Down Circle Hover:

Put in Html/Javascript.
Before! credit to; float down : mine tutor,circle hover? i forgot the link,if i get i'll update ;)
<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>
<div style='display:scroll; position:fixed; top:140px; left:-12px;'>
<style type="text/css">
#navbar-iframe {
display: none !important;
}
}
.ch-grid {
 margin: 20px 0 0 0;
 padding: 0;
 list-style: none;
 display: block;
 text-align: center;
 width: 100%;
}
.ch-grid:after,
.ch-item:before {
 content: '';
    display: table;
}
.ch-grid:after {
 clear: both;
}
.ch-grid li {
 width: 290px;
 height: 320px;
 display: inline-block;
 margin: 20px;
}
.ch-item {
 width: 100%;
 height: 500%;
 border-radius: 50%;
 position: relative;
 cursor: default;
 box-shadow:
  inset 0 0 0 16px rgba(255,255,255,0.6),
  0 1px 2px rgba(0,0,0,0.1);
 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;
}
.ch-img{
 background-image: url(http://data.whicdn.com/images/47571612/16784_308285699289351_2084244656_n_large.png);
background-position:50% 50%;
background-size:500px;
}
.ch-info {
 position: absolute;
 background: url(http://data.whicdn.com/images/47571612/16784_308285699289351_2084244656_n_large.png) D9E8FC;background-position:50% 50%;
 width: 290;
 height: 290;
 border-radius: 50%;
 opacity: 0;
 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;
 -webkit-transform: scale(0);
 -moz-transform: scale(0);
 -o-transform: scale(0);
 -ms-transform: scale(0);
 transform: scale(0);
 -webkit-backface-visibility: hidden;
}

.ch-item:hover {
 box-shadow:
  inset 0 0 0 1px rgba(255,255,255,0.1),
  0 1px 2px rgba(0,0,0,0.1);
}
.ch-item:hover .ch-info {
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -o-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
 opacity: 1;
}
.ch-item:hover .ch-info p {
 opacity: 1;
}
</style>
<br />
<center>
Hover~
    <ul class="ch-grid">
<li>
                                                <div class="ch-item ch-img">
<div class="ch-info">
<center>
<div style="background: url(http://2.bp.blogspot.com/-sNH-Nec6GdA/Tu6y_zQ6caI/AAAAAAAADog/NE58EGiFd2U/s1600/tinyblueee.gif); border-radius: 10px; margin-top: 80px; width: 170px;">
<br />
Your code widget/Status/Whatever untuk pesan Hover
</div>
</center>
</div>
</div>
</li>
</center>
<center>
<br /><br /></center></div>

Tidak ada komentar: