Menu For Beqiutors

Selasa, 05 Februari 2013

Circle Hover 1(simple Template)

Faradina Fazira | 03.52 |
Ini 100 persen aku buat sendiri berkat circlehover.com aku tambahain sendiri cbox background nya inget 100PERSEN BUATAN AKU TANPA KOPAS PUNYA ORANG aku gak tahu yang penting simple template bisa


SEBELUM DI HOVER
SESUDAH DI HOVER


<center>
      </script><html>
<style type="text/css">

#navbar-iframe {
display: none !important;
}


.ch-item {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 position: relative;
 cursor: default;
 box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.ch-thumb {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 overflow: hidden;
 position: absolute;
 box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5);

 -webkit-transform-origin: 95% 40%;
 -moz-transform-origin: 95% 40%;
 -o-transform-origin: 95% 40%;
 -ms-transform-origin: 95% 40%;
 transform-origin: 95% 40%;

 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
 -ms-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}

.ch-thumb:after {
 content: '';
 width: 8px;
 height: 8px;
 position: absolute;
 border-radius: 50%;
 top: 40%;
 left: 95%;
 margin: -4px 0 0 -4px;
 background: rgb(14,14,14);
 background: -moz-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%, rgba(125,126,125,1) 100%);
 background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(14,14,14,1)), color-stop(100%,rgba(125,126,125,1)));
 background: -webkit-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
 background: -o-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
 background: -ms-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
 background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
 box-shadow: 0 0 1px rgba(255,255,255,0.9);
}


.ch-info {
 position: absolute;
 width: 100%;
 height: 100%;
 border-radius: 50%;
 overflow: hidden;
 background: #c9512e url(http://pastelpatterns.com/small/smallpattern-11.png);
 box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);
}

.ch-info h3 {
 color: #fff;
 text-transform: uppercase;
 position: relative;
 letter-spacing: 2px;
 font-size: 18px;
 margin: 0 60px;
 padding: 22px 0 0 0;
 height: 85px;
 font-family: 'Open Sans', Arial, sans-serif;
 text-shadow:
  0 0 1px #fff,
  0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
 color: #fff;
 padding: 10px 5px;
 font-style: italic;
 margin: 0 30px;
 font-size: 12px;
 border-top: 1px solid rgba(255,255,255,0.5);
}

.ch-info p a {
 display: block;
 color: #333;
 width: 80px;
 height: 80px;
 background: rgba(255,255,255,0.3);
 border-radius: 50%;
 color: #fff;
 font-style: normal;
 font-weight: 700;
 text-transform: uppercase;
 font-size: 9px;
 letter-spacing: 1px;
 padding-top: 24px;
 margin: 7px auto 0;
 font-family: 'Open Sans', Arial, sans-serif;
 opacity: 0;

 -webkit-transition:
  -webkit-transform 0.3s ease-in-out 0.2s,
  opacity 0.3s ease-in-out 0.2s,
  background 0.2s linear 0s;
 -moz-transition:
  -moz-transform 0.3s ease-in-out 0.2s,
  opacity 0.3s ease-in-out 0.2s,
  background 0.2s linear 0s;
 -o-transition:
  -o-transform 0.3s ease-in-out 0.2s,
  opacity 0.3s ease-in-out 0.2s,
  background 0.2s linear 0s;
 -ms-transition:
  -ms-transform 0.3s ease-in-out 0.2s,
  opacity 0.3s ease-in-out 0.2s,
  background 0.2s linear 0s;
 transition:
  transform 0.3s ease-in-out 0.2s,
  opacity 0.3s ease-in-out 0.2s,
  background 0.2s linear 0s;

 -webkit-transform: translateX(60px) rotate(90deg);
 -moz-transform: translateX(60px) rotate(90deg);
 -o-transform: translateX(60px) rotate(90deg);
 -ms-transform: translateX(60px) rotate(90deg);
 transform: translateX(60px) rotate(90deg);

 -webkit-backface-visibility: hidden;
}

.ch-info p a:hover {
 background: rgba(255,255,255,0.5);
}
.ch-item:hover .ch-thumb {
 box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2);
 -webkit-transform: rotate(-110deg);
 -moz-transform: rotate(-110deg);
 -o-transform: rotate(-110deg);
 -ms-transform: rotate(-110deg);
 transform: rotate(-110deg);
}
.ch-item:hover .ch-info p a{
 opacity: 1;
 -webkit-transform: translateX(0px) rotate(0deg);
 -moz-transform: translateX(0px) rotate(0deg);
 -o-transform: translateX(0px) rotate(0deg);
 -ms-transform: translateX(0px) rotate(0deg);
 transform: translateX(0px) rotate(0deg);
}.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:450px;
}

.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-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;
}

</style>
Text Kalian Disini (faradina-fazira.blogspot.com)
<ul class="ch-grid">
<li><div class="ch-item">
<div class="ch-info">
<br />
<center>
<div style="background: url(http://2.bp.blogspot.com/-sNH-Nec6GdA/Tu6y_zQ6caI/AAAAAAAADog/NE58EGiFd2U/s1600/tinyblueee.gif); border-radius: 10px; margin-top: 50px; width: 270px;">
<br />
YOUR CBOX CODE
</div>
</center>
</div>
<div class="ch-thumb ch-img">
</div>
</div>
</li>
</ul>
<br /><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 2 Cooming Soon

1 komentar:

Faradina Fazira mengatakan...

Percobaan coment