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. update tak bilang bilang nih sobat :) ehyehe

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

    ReplyDelete
  15. @ 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
  16. Bookmark lagi Sob...Thanks for share and happy blogging

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

    ReplyDelete
  18. keren sob efeknya apalagi yang skew

    ReplyDelete
  19. @ Lord Chilight : silahkan sob

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

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

    @ binkbenk : thank sob

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

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

    ReplyDelete
  23. keren........saya coba ah...........

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

    ReplyDelete
  25. 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
  26. 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
  27. iya lucu banget hehehehe :D coba sampe tipis banget trus pake translate kabur dah!

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

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

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

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

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

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

    ReplyDelete
  34. 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
  35. @ 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
  36. @ 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
  37. @ 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
  38. @ Aldio : silahkan sob :)

    @ Black Angel Syndicate : siap sob langsung ke TKP

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

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

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

    @ WahidBlog : silahkan sob

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

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

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

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

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

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

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

    ReplyDelete
  48. 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
  49. @ Asis Sugianto : silahkan sobat,trimakasih atas kunjungannay

    @ Dadang herdiana : thank gan,siap lah :)

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

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

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

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

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

    ReplyDelete
  54. Wahh, keren transisi imagenya

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

    ReplyDelete
  55. css3 trantition keren-2 ya :)

    ReplyDelete
  56. Wahh, tricknya Succes udah ane pasang

    ReplyDelete
  57. 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
  58. wah sob..
    klo ada waktu semua post dsini djadiin e-book :D
    biar bsa jadi tutorial offline :p

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

    ReplyDelete
  60. 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
  61. @ hamparan : thank sob :)

    @ Rama88 : iyo biar kesan sorenya dapet sob

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

    ReplyDelete
  62. @ Dhani : thank gan

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

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

    ReplyDelete
  63. @ 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
  64. bisa mengot2 gitu keren sob.. :D

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

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

    @ Black Angel Syndicate : seep

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

    btw pa kabar sob ???

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

    ReplyDelete
  69. 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
  70. Wah pertamax gan, nice share :)

    ReplyDelete
  71. @ 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
  72. ikut meramaikan di blog sobat :D

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

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

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

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

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

    ReplyDelete
  78. makin keren ajha nigh blognya

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

    @ Share Our Knowledge : thank sob

    @ Namaku Mharjipes : trimakasih sobat :)

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

    ReplyDelete
  81. Kagak ada demonya ya?

    Btw tampilan blognya mantabs gan. :D

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

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

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

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

    ReplyDelete
  86. @ 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
  87. @ 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
  88. @ DHENYSHARE : thank sob,,

    @ Rohis Facebook : thank sob atas kunjungannya

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

    ReplyDelete
  89. @ 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
  90. makin keren disini sob..mantap..

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

    ReplyDelete
  92. Kunjungan kembali sobat sambil nunggu postingan selanjutnya

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

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

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

    @ Ageboy : thank sob,,

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

    ReplyDelete
  96. woow mantapss btw backgroundnya terlalu berat nih sob

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    ReplyDelete
  111. Nice info .. :)

    Kunjungi balik blogku ya .. ^^

    ReplyDelete
  112. @ Torayasurabaya : sama2 sob

    @ mY c0lLecTi0n : siap pasti gan :)

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

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

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

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

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

    ReplyDelete
  118. cara manggilnya gimana?

    ReplyDelete
  119. [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