Menu For Beqiutors

Jumat, 01 Februari 2013

Circle Hover 2 (Simple Template)

Faradina Fazira | 04.03 |
Setelah Aku Posting Tentang Circle Hover 1 Aku Janji Mau Posting Versi Ke-2 Nya.. Sip 100 persen Buatan Aku Nih;) Key Mulai..

SEBELUM DI HOVER
SESUDAH DI HOVER




<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: 320px;
 height: 320px;
 display: inline-block;
 margin: 20px;
}

.ch-item {
 width: 100%;
 height: 100%;
 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: inherit;
 height: inherit;
 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>
Text Kalian Sini (faradina-fazira.blogspot.com)

    <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: 270px;">
<br />
YOUR CBOX CODE
</div>
</center>
</div>
</div>
</li>
</ul>
</center>
<center>
<br /><br /></center>

CARA MASUKINNYA: blogger>Tata Letak>> Tambah Gadget>>HTML/Javascript

Blue: Url Background
Pink: Text Kalian
RED: Your Cbox Code

Siapa yang sudah gunakan tutor aku coment,kalo mau copas postingan aku credit ke aku yah :). Circle Hover 3 Cooming Soon

Tidak ada komentar: