Only Your ;
ABOUT ENTRY Tutorial linkies Goodies REQUEST TIPS follow
Tutorial Circle Hover
Friday, November 23, 2012 0 Comments
Assalamualaikum

Hari ni hanah nak buat tuto circle hover :) .



Step 1->Dashboard->Template

Step 2->Cari code  </style> lepas tu copy code dekat bawah ni 

Step 3->Kalau dah copy sila pastekan sebelum code </style>

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-1 {
background-image: url(http://s2.favim.com/orig/31/architecture-beautiful-building-buildings-christmas-Favim.com-248699.jpg);
}
.ch-info {
position: absolute;
background-image: linear-gradient(bottom, rgb(255,230,156) 30%, rgb(234,255,209) 61%);
background-image: -o-linear-gradient(bottom, rgb(255,230,156) 30%, rgb(234,255,209) 61%);
background-image: -moz-linear-gradient(bottom, rgb(255,230,156) 30%, rgb(234,255,209) 61%);
background-image: -webkit-linear-gradient(bottom, rgb(255,230,156) 30%, rgb(234,255,209) 61%);
background-image: -ms-linear-gradient(bottom, rgb(255,230,156) 30%, rgb(234,255,209) 61%);
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-info h3 {
color: #000;
letter-spacing: 2px;
font-size: 12px;
margin: 0 30px;
padding: 45px 0 0 0;
height: 140px;
font-family: 'century gothic', Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.ch-info p {
color: #000;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
opacity: 0;
-webkit-transition: all 1s ease-in-out 0.4s;
-moz-transition: all 1s ease-in-out 0.4s;
-o-transition: all 1s ease-in-out 0.4s;
-ms-transition: all 1s ease-in-out 0.4s;
transition: all 1s ease-in-out 0.4s;
}
.ch-info p a {
display: block;
color: #000;
color: rgba(255,255,255,0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info p a:hover {
color: #fff222;
color: rgba(255,242,34, 0.8);
}
.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;
}
.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: 220px;
height: 220px;
display: inline-block;
margin: 20px;
}

. Step 4-> Dah pastekan ? copy code dekat bawah ni pulak

<ul class="ch-grid"> <li> <div class="ch-item ch-img-1"> <div class="ch-info"> <h3>put your little about at here</h3> <p>credit: Hanah <a href="http://drbl.in/eOPF">View on Google chrome</a></p> </div> </div> </li> <li> </ul> </section> </div>

Step 5-> Korang Pastekan dekat mana2 yang korang nak letak  k , k dah siap
Tak jadi sila bagitahu

PASTFUTURE
Farhanah!

Nama tuan blog ni Nurul Farhanah Binti Efendi.Age 18 years old oh my god sudah besar rupanya haha :) In Engaged with Khairudin and this is my first and last blog lovely . My blog born 05/7/2010.Btw thanks singgah sini yea . Please don't copy cat or copy pig . Wanna exchange link ? Bagitahu je di cbox . Maseh . Hope yours enjoy .
Find Me At :

Chatbox!



Ask.Fm!


Thanks to!

Layout by mymostloved My cursos , background , header and all things in my blog are my made .. Re-edit by me. Help by Si comel,Thanks so much to them because help hanah:)Best view in google chrome.

Past!