Sunday, July 22, 2012

Tutorial : Image Hover Stlye 2


2591328080_eae74ab1e1_large
OK kalau yang stlye 1 image hover terangkan? Now sekarang tutorial image hover jadi kabur . Jom mula



For Blogskin

 Dashboard > Template > Edit HTML
 Tekan ctrl + f serentak dan cari code </style>
 Copy code bawah ni:
 img{
opacity: .70;
-webkit-transition: 1.4s;
 -moz-transition: 1.4s;
border-radius:10px;}

img:hover{
border-radius:30px;
-webkit-transition: 1.4s;
 -moz-transition: 1.4s;
opacity: 100.0; }
 Paste code di atas </style>
 Preview & save.



For Design

 Design > Add Gadget > Html/JavaScript
 Copy code bawah ni dan paste di dalam Html/JavaScript
<style>
/* ----- Image opacity effect 1 ----- */
.post a img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}
.post a:hover img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
</style>
 SAVE dan lihatlah hasilnya.

No comments: