☆彡Image Capacity Hover On Classic Template


Assalamualaikum & Hye Korang!


Today Nurin nak buat tuto yg telah direquest ^^ It's time to begin it! sebelum tuh.. Nurin nak ajar korang buat tiga jenis Image Opacity Hover or Image Effect, korang boleh pilih slah satu drpd tiga code tuh nnti :)

Preview Here!

1) Image Opacity Hover 1
  • From Dashboard >> Template
  • Search Code a:link, a:visited { 
  • Copy Code di bwh & pastekan di ATAS code yg di-search tadi
    /*------ IMAGE ANIMATION------*/
    img, a img { border-radius: 0px; opacity: .75; filter: alpha(opacity=100); -o-transition: opacity 1.5s linear; -webkit-transition: opacity 1.5s linear; -moz-transition: opacity 1.5s linear; }
    img:hover, a:hover img {opacity: 100; filter: alpha(opacity=100); -o-transition: opacity 1s linear; -webkit-transition: opacity .8s linear; -moz-transition: opacity 1.5s linear; }

    2) Image  Opacity Hover 2 (Like Pinky Minky Story Skin)

    • From Dashboard >> Template
    • Search Code ni : <style type="text/css">
    • Copy code bwh ni & pastekan di BAWAH code yg di-search tadi : 
    img {filter:alpha(opacity=50); -moz-opacity: 0.5; opacity:0.5; -khtml-opacity:0.5; -}
        img:hover {filter:alpha(opacity=100); -moz-opacity: 1.0; opacity:1.0; -khtml-opacity:1.0; }

    Okey, That's All :) Hope Sume Tutorial ari ni dapat membantu dlm mengedit & menghias blog korang tuh :) Babai! Malas nak pegi sekola +_+

    Labels: