share all free for you

Advertiser Here

Beberapa Efek Transisi Pada Gambar

BLOGCUNAYZ - Hallo sobat apa kabarnih,,?? di tahun 2012 ini saya akan share Beberapa Eefek Transisi Pada Gambar. Trik kali ini bisa digunakan untuk membuat efek pada semua gambar di blog kita,langsung saja lah gak usah mundar mandir lagi cekendol,,

Nih ane kasih beberapa efeknya :

Efek Bumping
Rizky Wardiansyah
.post img{
-webkit-transition:all .5s ease-out;
-moz-transition:all .5s ease-out;
-ms-transition:all .5s ease-out;
-o-transition:all .5s ease-out;
transition:all .5s ease-out;
}

.post img:hover{
-webkit-transform:translate(0px,10px);
-moz-transform:translate(0px,-10px);
-ms-transform:translate(0px,-10px);
-o-transform:translate(0px,10px);
transform:translate(0px,-10px);
}
Efek Fade Out
Rizky Wardiansyah
.post img{
-webkit-transition:opacity .5s ease-out;
-moz-transition:opacity .5s ease-out;
-ms-transition:opacity .5s ease-out;
-o-transition:opacity .5s ease-out;
transition:opacity .5s ease-out;
}

.post img:hover{
opacity:0.2;
}
Efek Fade In
Rizky Wardiansyah
.post img{
-webkit-transition:opacity .5s ease-out;
-moz-transition:opacity .5s ease-out;
-ms-transition:opacity .5s ease-out;
-o-transition:opacity .5s ease-out;
transition:opacity .5s ease-out;
opacity:0.2;
}

.post img:hover{
opacity:1;
}
Efek Rotasi
Rizky Wardiansyah
.post img{
-webkit-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
-ms-transition:all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition:all 0.5s ease-out;
}

.post img:hover{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
Efek Membesar
Rizky Wardiansyah
.post img{
-webkit-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
-ms-transition:all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition:all 0.5s ease-out;
}

.post img:hover{
-webkit-transform:scale(2,2);
-moz-transform:scale(2,2);
-ms-transform:scale(2,2);
-o-transform:scale(2,2);
transform:scale(2,2);
}
Efek Skew
Rizky Wardiansyah
.post img{
-webkit-transition:all .5s ease-out;
-moz-transition:all .5s ease-out;
-ms-transition:all .5s ease-out;
-o-transition:all .5s ease-out;
transition:all .5s ease-out;
}

.post img:hover{
-webkit-transform:skew(30deg,20deg);
-moz-transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg);
-o-transform:skew(30deg,20deg);
transform:skew(30deg,20deg);
}

Untuk memasang efek ini di blog sobat sangatlah gampang berikut caranya :

1. Masuk Dasboard >> Template >> Edit HTML
2. Cari kode ]]></b:skin> Untuk lebih mudah dalam pencarian tekan ctrl+F
3. Letakan salah satu kode CSS efek transisi di atas kode no 2
4. save and done ^_^

Gimana bagus gak,,?? gak ya,,?? yaudah jika ada yang mau kasih tambahan silahkan,,..

Title : Beberapa Efek Transisi Pada Gambar
URL : http://blogcunayz.blogspot.com/2012/01/beberapa-eefek-transisi-pada-gambar_01.html
Anda boleh menyebar Luaskan atau Meng Copy-Paste Artikel ini bila dapat bermanfaat bagi teman-teman anda, Namun jangan lupa untuk meletakkan Link Beberapa Efek Transisi Pada Gambar sebagai Sumbernya.

Sudah ada [ 145 komentar ] bagaimana pendapat Anda,,?

  1. keren2 sob efeknya,, =)) btw ane pertamax gak ya,, =))

    ReplyDelete
  2. HeebaaaTtt...! yg terakhr blm prnh coba hehehe

    ReplyDelete
  3. @ Rama88 : thank sob,,wkwkwk =)) =)) iyo selamat sob :))

    @ Putra Tenzhung : weew asyik di bilang hebat sama master wkwkwk,,oh yang efek miring ya sob,, =))

    ReplyDelete
  4. anjirrr gagal pertamax lagi euy...
    Efek Rotasi nya kok cuman efek hover doang gan.

    *pergi ke alam mimpi ahh byee (jangan lupa gehunya sob)

    ReplyDelete
  5. @ Ф дфѕдғфдғ Ф : wkwkwk mungkin lain kali sob,ok sip ane juga mau tidur nih

    ReplyDelete
  6. keren banget tuh yang skewnya heheheh mantap
    kayak gimana ya itu :D lucu dehhhh!

    ReplyDelete
  7. @ Farixsantips : wkwkwk kaya mau kabor ya gambarnya =)) =))

    @ SYSTEM OF BLOG : thank gan

    ReplyDelete
  8. Banyak kodenya.
    Ikutan belajar di sini gan.
    Selamat tahun baru 2012 gan ya

    ReplyDelete
  9. wah, keren efek transisi webkitnye.....
    lengkap.....
    ane Bookmark dolo ya sob.....
    nice 4 share...

    ReplyDelete
  10. @ Ageboy Blogs : thank gan :)

    @ Obat Sakit 2011 : silahkan gan,Selamat tahun baru 2012 juga

    @ zaenal blog : silahkan sob

    @ DODE-XP.COM : sama saya juga pake yang itu :))

    ReplyDelete
  11. wow blog tutorial yang kere.. tidak salah masuk ane kemari, hehehehe

    masih kurang atu tu gan. tambah lagi yang ditunjuk gambar langsung pecah. ane perneh lihat keren deh.. coba di share caranya pasti banyak yang demen.hehehe

    thanks. happy blogging

    ReplyDelete
  12. @ awelqq : maksudnya sob,,?? gak ngerti ane =)) =))

    @ Wisata Murah : thank sob,wah kalo itu ane belon belajar tuh wkwkwk,tar ane tapa dulu deh =)) =)),,happy blogging juga

    ReplyDelete
  13. Yahh Gagal pertamax dehh... Mampir balik ya sob... Berbagi HACKING, TWEAKING, SOURCE CODE, TIPS N TRICK, SOFTWARE, GAME, dll

    ReplyDelete
  14. @ Farixsan Quilicuor (Faris Hardiyanto 177) : wah ente amnesia ris kan gw dah share di group pus ente kan dah komen di atas =))

    @ Black Angel Syndicate : lain kali mungkin sob wkwkwk,,siap2,,

    ReplyDelete
  15. Bookmark lagi Sob...Thanks for share and happy blogging

    ReplyDelete
  16. bagus-bagus yak efeknya ane simpen dulu yo. ngomong-ngomong taro cssnya nya dimana gan.. n ada kode tambahan lagi gak buat fotonya.

    ReplyDelete
  17. keren sob efeknya apalagi yang skew

    ReplyDelete
  18. @ Lord Chilight : silahkan sob

    @ Iskaruji dot com : seept lah sob wkwkwk =)) happpy blogging juga

    ReplyDelete
  19. @ Fazri : oh iya lupa gan tar saya edit lagi postingannya :)

    @ binkbenk : thank sob

    ReplyDelete
  20. Mantap sob., lengkap banget..! *smile

    ReplyDelete
  21. keren sob...
    ditunggu komentar baliknya?

    ReplyDelete
  22. keren........saya coba ah...........

    ReplyDelete
  23. bisa dicoba nih sobat, tapi radh malas nih bongkar kode html blog, kodenya sy save aja dulu sob... mohon ijin nih sob...

    ReplyDelete
  24. Alhamdulillah kabar sae master.Btw saya gagal maning pertama dah di serang sama master Rama hehehee.Keren tutornya, saya baca lagi nih soalnya rada bingung:D

    ReplyDelete
  25. HUaaaaaaa...komplit nih sob, sama kayak putra:yang terakhir belum pernah coba..mending ane bookmark dl nih postingan buat ntr praktek..hehehe.. oke2 makasih sob

    ReplyDelete
  26. iya lucu banget hehehehe :D coba sampe tipis banget trus pake translate kabur dah!

    ReplyDelete
  27. :D wah keren sob..
    jadi pengen mncoba nih..

    ReplyDelete
  28. keren gan. tp komenny terlalu k atas ni. kotak form buat nulis comment nggabung

    ReplyDelete
  29. wkwkwk mantepp sobb , ane paling suka efek yg Fade" hahay , sorry harang mampir nih

    ReplyDelete
  30. btw kok ni muncul scroll bawah ya ??

    ReplyDelete
  31. Waduh kaga pertamax yaudeh pertaminax ja hehe. praktekin ah sekarang :D

    ReplyDelete
  32. keren sob, ane simpen dulu ah, biyar gak lupa hhe

    ReplyDelete
  33. Mantab sobat... Mampir balik blog ane ya sob...
    Ada Postingan nhe Comment ya... Thx
    Berbagi HACKING, TWEAKING, SOURCE CODE, TIPS N TRICK, SOFTWARE, GAME, dll

    ReplyDelete
  34. @ Rohis Facebook : thank sob,,... kalo mau pake emoticon seperti biasa gak usah pake kata smile :)

    @ DHENYSHARE : thank sob,seep lah

    @ IT-Soft Center : silahkan sob

    @ Asis Sugianto : silahkan sob yang penting happy =)) =))

    ReplyDelete
  35. @ Bisnis Online Blog : wkwkwk Alhamdulillah yah =)),,next time kali sob

    @ AgusLho : silahkan sob di ctrl+d :),sama2 sob

    @ Farixsan Quilicuor (Faris Hardiyanto 177) : hahah au ah gelap =)) =))

    @ Galau'ers : silahkan di coba sob

    ReplyDelete
  36. @ Asmara Susanto : oh gitu ya sob tar ane edit2 lagi dah =)) thank for masukannya

    @ Mbah Qopet : hahah harang,,?? jarang kali mbah,,scroll ke bawah ningendi mbah,,??

    @ Ultrabook Notebook Tipis Harga Murah Terbaik : silahkan sob :)

    @ Deganshah Putra : hahah =)) ada2 aja si masbro mah,,silahkan mas

    ReplyDelete
  37. @ Aldio : silahkan sob :)

    @ Black Angel Syndicate : siap sob langsung ke TKP

    ReplyDelete
  38. persempaaaaaaaaaaaxxxxxxxxxxxxxxxxxxxxxxx
    keren bgt masbro :)
    praktekin ah :D

    ReplyDelete
  39. wao keren ane mau coba yang fade in aja dach sob

    ReplyDelete
  40. @ Dayz : thank masbro,silahkan di praktekin

    @ WahidBlog : silahkan sob

    ReplyDelete
  41. Bagus sobat efeknya...perlu nanti lain kali tak coba tipsnya.
    Terima kasih

    ReplyDelete
  42. absen pagi aja dolo, efek bumping udah ane teraoin sobatku

    ReplyDelete
  43. ane paling suka yang fade in dan fade out :)

    ReplyDelete
  44. @ cardiacku : trimakasih sobat,silahkan :)

    @ WahidBlog : thank sob atas kunjungannya,,weh ajib tar ane maen ke tempat ente

    ReplyDelete
  45. @ Musa Khairul Umam : sama ane juga sob,,sob kok gak online di fb,,??

    ReplyDelete
  46. mampir lagi sobat sembari menyimak beberapa efek transisi dari sobat serta menantikan update terbaru dari sobat...

    ReplyDelete
  47. dengan permainan efek CSS ini memang blog jadi tampil beda. met pagi sob. salam


    wow ane datang lagi mau nangkap burung burung itu ga kena kena sob, hehe keren

    ReplyDelete
  48. @ Asis Sugianto : silahkan sobat,trimakasih atas kunjungannay

    @ Dadang herdiana : thank gan,siap lah :)

    @ Wisata Murah : yup betul3X,wkwkwk =)) =)) coba pake jaring sob

    ReplyDelete
  49. Keren sangat,ijin ane coba kawan.Kau memang biang CSS nieh.Makasih ya,happy blogging.

    ReplyDelete
  50. @ Raihan Mar'ie Ramadhan : thank,silahkan kawan,wkwkwk bisa aja nih masbro,sama2,happy blogging juga :)

    ReplyDelete
  51. kunjungan di sini,,,
    pada keren2 semua ni blognya,,,
    tutorialnya jg mantapp sob :)

    ReplyDelete
  52. mampir lagi ahh,, =)) ehh itu ada kelelawarnya,, =))

    ReplyDelete
  53. Wahh, keren transisi imagenya

    tapi klo ane pasang di blog ane,kayaknya gak Cocob sob

    ReplyDelete
  54. css3 trantition keren-2 ya :)

    ReplyDelete
  55. Wahh, tricknya Succes udah ane pasang

    ReplyDelete
  56. Keren banget mas, ini dia yang saya tunggu-tunggu. Dari kemarin cari efek Zoom gambar ga dapet-dapet mas. Makasih banget sudah share. Mudah-mudahan ga berat kode CSS nya.
    Oh ya met tahun baru ya mas. Salam Hormat Kami

    ReplyDelete
  57. wah sob..
    klo ada waktu semua post dsini djadiin e-book :D
    biar bsa jadi tutorial offline :p

    ReplyDelete
  58. wah bagus baget ya eefek transisinya, jadi ingin mencoba... :)

    ReplyDelete
  59. hyah.. saya cuma bisa manggut2 aja gan..
    wehehe..
    support aja dah dsni yaa...
    selamat tahun baru..
    dan ditunggu kunjungan baliknya ya
    salam persahabatan
    happy blogging :)

    ReplyDelete
  60. @ hamparan : thank sob :)

    @ Rama88 : iyo biar kesan sorenya dapet sob

    @ MHARJIPES.COM : kenapa gak cocok sob,,?? kan tampilannya gak berubah

    ReplyDelete
  61. @ Dhani : thank gan

    @ MHARJIPES.COM : wkwkwk alhamdulillah yah =)) =))

    @ HONDA CENTER : wah kebetulan banget ya kalau begitu :),,selamat tahun baru juga

    ReplyDelete
  62. @ Si Galau : boleh juga tuh sarannya cuma kayaknya agak ribet sob :)

    @ anisayu : thank gan,silahkan di coba :0

    @ Outbound Malang : oh gitu ya sob,,ok thank untuk supportnya,siap laksanakan sob,salam juga,and happy blogging juga

    ReplyDelete
  63. bisa mengot2 gitu keren sob.. :D

    ReplyDelete
  64. Jalan-Jalan Lagi... Mampir balik blog ane ya sob... Berbagi HACKING, TWEAKING, SOURCE CODE, TIPS N TRICK, SOFTWARE, GAME, dll

    ReplyDelete
  65. @ awelqq : wkwkwk kaya anak2 dugem aja =)) =))

    @ Black Angel Syndicate : seep

    ReplyDelete
  66. keren nih sob ...
    mau nyoba yg Skew aaah ....

    btw pa kabar sob ???

    ReplyDelete
  67. @ Shinobi Cafe : thank sob,silahkan di coba sob,alhamdulillah baik sob,ete sendiri apa kabar,,?? jarang keliatan sekarang

    ReplyDelete
  68. wah keren nih, oh iya sob, link blog anda telah kupasang di blogroll pasang balik ya sob...


    #semoga dengan di pasanganya link pada blogroll akan menambah hubungan silaturahmi kita. hehe...

    ReplyDelete
  69. @ mania-xp : ok seep lah sob,tapi lain kali pesannya di page linkexchange ya :),,,amien

    @ Adie Konoe Poetra Dyanaz : wkwkwk pertamax artinya pertama gan,,,=)) =)) ,,thank

    ReplyDelete
  70. ikut meramaikan di blog sobat :D

    ReplyDelete
  71. @ Aldio Blog Trimakasih sobat sudah berkenan meramaikan :)

    ReplyDelete
  72. nang irungku kiye :P =)) , wkowkwokwo maho maho

    ReplyDelete
  73. @ Mbah Qopet : hahaha =)) =)) teing ah te ngarti abi mah,,, pokokna mah si mbah teh sang maho =))

    ReplyDelete
  74. wah keren nie sob, backgroundnya juga keren banget naruto n pain.
    mantap

    ReplyDelete
  75. wah, komplit nih efek"nya,, mantep juga. ^^

    ReplyDelete
  76. @ Liandri eko : thank sob,wkwkwk thank lagi abis ane sekarang lagi suka naruto nih =))

    @ Share Our Knowledge : thank sob

    @ Namaku Mharjipes : trimakasih sobat :)

    ReplyDelete
  77. Wah.. mantap gan info'nya,.. ane bru tau skrang.. !!
    izin coba gan.. ! :)

    ReplyDelete
  78. Kagak ada demonya ya?

    Btw tampilan blognya mantabs gan. :D

    ReplyDelete
  79. hadir lagi di sini sob,,
    baca2 tutorial :)

    ReplyDelete
  80. Jalan-Jalan Lagi sobat... Mampir balik ya sob... Maaf jika saya ada salah... :)

    ReplyDelete
  81. keren-keren efeknya.. hohoo
    thanks share nya ya mas.. :)

    ReplyDelete
  82. keren, saya udah pake efek bumping di blog saya,,,

    ReplyDelete
  83. @ tagantar : silahkan gan

    @ Algo wijaya : itu kan gambarnya langsung sekaligus demonya gan :) coba di sorot,,thank gan

    @ Deganshah Putra : wkwkwk tar ane mampir untuk bagi2

    ReplyDelete
  84. @ Obat Sakit 2011 : sama2 gan,syukur bila artikel saya dapat bermanfaat untuk sobat

    @ >>> Ichwan HAUSGAME : silahkan di coba sob,insya allah gak kok :)

    @ hamparan : trimakasih atas kunjungannya,silahkan di baca sob

    ReplyDelete
  85. @ DHENYSHARE : thank sob,,

    @ Rohis Facebook : thank sob atas kunjungannya

    @ Black Angel Syndicate : tuh kan jadi marah si masbro mah,,santai aja lagi mas :)

    ReplyDelete
  86. @ Diskusi Blogger Pemula : thank mas hohoho juga wkwkwk,,sama2 :)

    @ Windows 7 blog : wew gimana kren gak sob,,?? wkwkwk =))

    @ Rohis Facebook : thank sob sudah meramaikan suasana :)

    ReplyDelete
  87. makin keren disini sob..mantap..

    ReplyDelete
  88. Pena hadir dan absen pagi sobat setelah sekian lama offline neh...
    Keren sob efeknya..sipplah

    ReplyDelete
  89. Kunjungan kembali sobat sambil nunggu postingan selanjutnya

    ReplyDelete
  90. efek gambar transisinya keren,
    masih ane bookmark sob...
    blom sempet raktek nih...
    thanks sob,
    nice share....

    ReplyDelete
  91. sipp deh, makin kreatif dgn transisi, dan dikembangan dgn hover pada img.. hohohoho
    sip sipp, makasih triknya ^^

    ReplyDelete
  92. @ Mbah Qopet : opo koe,,?? ora budeng ane =)) =))

    @ Ageboy : thank sob,,

    @ tautanpena : iya neh sekarang jalang mampir,,thank sob

    ReplyDelete
  93. woow mantapss btw backgroundnya terlalu berat nih sob

    ReplyDelete
  94. @ randy oktaran : thank sob,iya saya pusing cari backgroundnya :D

    ReplyDelete
  95. keren sob, btw yang efek rotasi perasaan saya saja atau memang demo efeknya ga jalan ???

    ReplyDelete
  96. @ Friski Gatra : wah kemarin jalan gan,kok sekarang gak ya,,?? aneh banget

    ReplyDelete
  97. @ chelonia : thank gan,silahkan di coba :)

    ReplyDelete
  98. Kunjungan pagi untuk sahabat untuk menimba ilmu di blog profesional.

    ReplyDelete
  99. @ Bagus Sugiarto : trimakasih untuk kunjungannya sobat,ajib di bilang profesional =))

    ReplyDelete
  100. Trim's infonya & jgn lupa berkunjung balik ke blog saya

    ReplyDelete
  101. @ Junaedi : sama2 gan,siap langsung ke TKP

    ReplyDelete
  102. @ Tutorial Blog : silahkan gan di coba,semoga dapat bermanfaat

    ReplyDelete
  103. (new be neh )wezzzz.. cool bnget Boz.. sya coba N mantab.. hebat 10x

    ReplyDelete
  104. dah di coba smuanya.. N Akitived smua..hehehe..keren..trimz broo

    ReplyDelete
  105. @ Alam Perwira : sama-sama gan,trimakasih atas kunjungannya

    ReplyDelete
  106. wah pusing nih gan,blm pernah nyoba ana

    ReplyDelete
  107. @ cibaduyut bandung : pusing kumaha kang ? cobian prakteken hela :)

    ReplyDelete
  108. Nice info .. :)

    Kunjungi balik blogku ya .. ^^

    ReplyDelete
  109. @ Torayasurabaya : sama2 sob

    @ mY c0lLecTi0n : siap pasti gan :)

    ReplyDelete
  110. mampir kesini mas bro...mksh tutorialnya,,,

    ReplyDelete
  111. Maf OOT. Aq mw tanya?
    Mas blog aq kq ndak bisa dikasih breadcrumbs ya.......?
    Tolong bantuannya ya.......?

    ReplyDelete
  112. Assalamualaikum Bismillah Alhamdulillah | Blogwalking mas sambil menanti postingan terbaru mas....? kunjungi balik ya...? | Alhamdulillah Wassalamualaikum.

    ReplyDelete
  113. hatur nuhun.....mantaaaap.
    ini yang di cari !!

    ReplyDelete
  114. keren kang efeknya :O
    salam kenal yah kang :D

    ReplyDelete
  115. cara manggilnya gimana?

    ReplyDelete
  116. [blockquote]Wah Salam kenal... Sangat bermanfaat sekali Artikel ini.
    Membuatku g habis berfikir, gimana cara memberi efek tersebut pada gambar tertentu saja, bukan semuanya... ?[/blockquote]

    ReplyDelete

Untuk menyisipkan kode,gunakan tag
[code]KODE ANDA[/code]
Untuk menyisipkan quote,gunakan tag
[blockquote]KATA-KATA ANDA[/blockquote]
Untuk menyisipkan gambar,gunakan tag
[img]URL GAMBAR ANDA[/img]
Untuk menyisipkan video,gunakan tag
[youtube]URL VIDEO ANDA[/youtube]
Anda juga bisa menggunakan emoticon seperti biasa.

Pasang Iklan Anda Disini

 
Copyright © 2011 Blogcunayz Template Design By Rizky Wardiansyah