30.3.14
34
Gambar Efek Hover

Efek Hover Gambar Dengan Desain Buka Tutup - Gambar dengan efek zoom, fade in, fade out, rotasi deg dan masih banyak lagi. Yang semuanya itu sudah kita kenal merupakan desain gambar dengan penggerak elemen CSS effect, sehingga obyek yang diam akan dapat bergerak dengan sentuhan pointer mouse (Hover). Pada artikel sebelumnya saya pernah memodifikasi sebuah gambar tanpa efek hover, namun gambar masih dapat bergerak dengan desain CSS transisi yang saya padukan dengan hover fokus (onmouse-focus-pointer), sehingga postingan lalu saya beri judul efek slide otomatis pada gambar yang tutorialnya dapat anda lihat pada link dibawah ini

SAHABAT BLOGGER 77 - Efek Slide Show Otomatis Pada Gambar

Sebelum artikel ini saya lanjutkan untuk kita bahas dan pelajari bersama, sebelumnya saya mohon maaf jika sekiranya akhir-akhir ini saya sangat jarang sekali hadir ke blog sahabat semua, namun bukan berarti saya lupa atau disengaja, tetapi saya lagi mencoba mendesain beberapa kode yang sejujurnya sangat menguras tenaga dan pikiran, agar apa yang akan saya sampaikan kali ini dapat sahabat cerna dan pelajari.
Spoiler dengan tombol buka tutup akan bekerja saat tombol di-klik, dari sumber kode ini saya sudah mendesain beberapa kode CSS untuk membuat Efek Hover Gambar Dengan Desain Buka Tutup, namun bedanya efek pada gambar berikut akan bekerja saat pointer hover (Gambar akan terbuka saat panah kursor mouse melintas/tanpa-klik) seperti pada DEMO SHOW dibawah ini



DEMO SHOW



.ch-item {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  cursor: default;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.ch-thumb {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5);
}

Kode diatas merupakan pembentukan rangka untuk pengaturan kode elemen tata letak dan posisi obyek gambar. Agar gambarnya tidak terlihat membosankan, saya menambahkan sedikit teks pada obyek gambar kedua, efeknya kurang lebih seperti cara membuat Efek Sliding Pada Gambar Postingan dengan kode dibawah ini

.ch-thumb:after {
 content: '';
 width: 8px;
 height: 8px;
 position: absolute;
 border-radius: 50%;
 top: 40%;
 left: 95%;
 margin: -4px 0 0 -4px;
 background: rgb(14,14,14);
 background: -moz-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%, rgba(125,126,125,1) 100%);
 background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(14,14,14,1)), color-stop(100%,rgba(125,126,125,1)));
}

.ch-img-1 {
 background-image: url(http://URL-Gambar Anda.jpg);
 z-index: 12;
}

//kode berikut obyek gambar kedua (background-img)
.ch-info {
 position: absolute;
 width: 100%;
 height: 100%;
 border-radius: 50%;
 overflow: hidden;
 background: #c9512e url(http://URL-Gambar Anda.png);
 box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);
}

//efek hover dengan perhitungan rotation speed
.ch-info p a:hover {background: rgba(255,255,255,0.5);}
.ch-item:hover .ch-thumb {
 box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2);
 -webkit-transform: rotate(-110deg);
 -moz-transform: rotate(-110deg);
 -o-transform: rotate(-110deg);
 -ms-transform: rotate(-110deg);
 transform: rotate(-110deg);
}
.ch-item:hover .ch-info p a{
 opacity: 1;
 -webkit-transform: translateX(60px) rotate(90deg);
 -moz-transform: translateX(60px) rotate(90deg);
 -o-transform: translateX(60px) rotate(90deg);
 -ms-transform: translateX(60px) rotate(90deg);
 transform: translateX(60px) rotate(90deg);
 -webkit-backface-visibility: hidden;
}



Kode lengkapnya seperti ini (CSS VERSI LENGKAP)

.ch-item {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 position: relative;
 cursor: default;
 box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.ch-thumb {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 overflow: hidden;
 position: absolute;
 box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5);
 -webkit-transform-origin: 95% 40%;
 -moz-transform-origin: 95% 40%;
 -o-transform-origin: 95% 40%;
 -ms-transform-origin: 95% 40%;
 transform-origin: 95% 40%;
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
 -ms-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}
.ch-thumb:after {
 content: '';
 width: 8px;
 height: 8px;
 position: absolute;
 border-radius: 50%;
 top: 40%;
 left: 95%;
 margin: -4px 0 0 -4px;
 background: rgb(14,14,14);
 background: -moz-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%, rgba(125,126,125,1) 100%);
 background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(14,14,14,1)), color-stop(100%,rgba(125,126,125,1)));
 background: -webkit-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
 background: -o-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
 background: -ms-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
 background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
 box-shadow: 0 0 1px rgba(255,255,255,0.9);
}

.ch-img-1 {
 background-image: url(http://URL-Gambar Anda.jpg);
 z-index: 12;
}
.ch-info {
 position: absolute;
 width: 100%;
 height: 100%;
 border-radius: 50%;
 overflow: hidden;
 background: #c9512e url(http://URL-Gambar Anda.png);
 box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);
}

.ch-info h3 {
  color: #fff;
  text-transform: uppercase;
  position: relative;
  letter-spacing: 2px;
  font-size: 18px;
  margin: 0 60px;
  padding: 22px 0 0 0;
  height: 85px;
  font-family: 'Open Sans', Arial, sans-serif;
  text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
  color: #fff;
  padding: 10px 5px;
  font-style: italic;
  margin: 0 30px;
  font-size: 12px;
  border-top: 1px solid rgba(255,255,255,0.5);
}

.ch-info p a {
  display: block;
  color: #333;
  width: 80px;
  height: 80px;
  background: rgba(255,255,255,0.3);
  border-radius: 50%;
  color: #fff;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 1px;
  padding-top: 24px;
  margin: 7px auto 0;
  font-family: 'Open Sans', Arial, sans-serif;
  opacity: 0;
 -webkit-transition:-webkit-transform 0.3s ease-in-out 0.2s,opacity 0.3s ease-in-out 0.2s,background 0.2s linear 0s;
 -moz-transition:-moz-transform 0.3s ease-in-out 0.2s,opacity 0.3s ease-in-out 0.2s,background 0.2s linear 0s;
 -o-transition:-o-transform 0.3s ease-in-out 0.2s,opacity 0.3s ease-in-out 0.2s,background 0.2s linear 0s;
 -ms-transition:-ms-transform 0.3s ease-in-out 0.2s,opacity 0.3s ease-in-out 0.2s,background 0.2s linear 0s;
 transition:transform 0.3s ease-in-out 0.2s,opacity 0.3s ease-in-out 0.2s,background 0.2s linear 0s;
  -webkit-transform: translateX(60px) rotate(90deg);
  -moz-transform: translateX(60px) rotate(90deg);
  -o-transform: translateX(60px) rotate(90deg);
  -ms-transform: translateX(60px) rotate(90deg);
  transform: translateX(60px) rotate(90deg);
  -webkit-backface-visibility: hidden;
}
.ch-info p a:hover {background: rgba(255,255,255,0.5);}
.ch-item:hover .ch-thumb {
  box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2);
  -webkit-transform: rotate(-110deg);
  -moz-transform: rotate(-110deg);
  -o-transform: rotate(-110deg);
  -ms-transform: rotate(-110deg);
  transform: rotate(-110deg);
}
.ch-item:hover .ch-info p a{
  opacity: 1;
  -webkit-transform: translateX(0px) rotate(0deg);
  -moz-transform: translateX(0px) rotate(0deg);
  -o-transform: translateX(0px) rotate(0deg);
  -ms-transform: translateX(0px) rotate(0deg);
  transform: translateX(0px) rotate(0deg);
}


Penambahan Obyek Gambar utama
Jika Anda ingin menampilkan lebih dari 1 gambar seperti pada DEMO SHOW, tambahkan kode pengaturan lay-out halaman seperti dibawah ini

.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;}

Tahap Akhir
Pemanggilan Efek dengan selector elemen kelas HTML seperti berikut

<ul class="ch-grid">
  <li>
  <div class="ch-item">
 <div class="ch-info">
<h3>Judul</h3>
<p>by Devy Indriyani <a href="http://URL-Anda">Teks Anda Disini</a></p>
  </div>
  <div class="ch-thumb ch-img-1">
  </div>
 </div>
  </li>
</ul>


Jika Anda dapat memahami elemen kode-kode diatas, bukan hanya satu tetapi banyak efek yang dapat Anda ciptakan dengan beragam versi hover, misalnya Efek Hover Gambar Dengan Desain Buka Tutup seperti versi Efek Cilukbaa..!! pada DEMO SHOW dibawah ini


DEMO SHOW


Semoga Anda dapat menikmati Tutorial ini, dan mendapat inspirasi tentunya. Terimakasih.!
-Salam Sukses-

Pathner Team - MARY LOU
Facebook - facebook.com/manoela.ilic
Images - drbl.in/eFDk

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Efek Hover Gambar Dengan Desain Buka Tutup
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

34 komentar

  1. Balasan
    1. bentuk nya lucu sekali efek nya juga asyik sekali sist ..hebat juga ya dia bikinnya :D pengen mencoba juga bikin kreas yang lain sist

      Hapus
    2. silahkan sist, semuanya terletak pada kode CSS transisi jika ingin efek yang berbeda lagi

      Hapus
  2. wah ini cantik sekali mbk, tapi scriptnya kok banyak banget. hehe terima kasih sharenya

    BalasHapus
    Balasan
    1. untuk mempermudah dalam peng-aditan mas, jadinya kodenya saya urutkan kebawah, makanya jadi kelihatan banyak

      Hapus
  3. mantap gan,, lanjutkan sharingnya ya

    BalasHapus
  4. keren gan..thanks..:)

    BalasHapus
  5. ini yg termasuk efek terbaik, saya akan menerapkannya mbak

    BalasHapus
    Balasan
    1. jika ingin menerapkannya pada blog, yang terpenting fokus pada ketiga kode ini
      1. CSS transisi (+origin) - kecepatan
      2. CSS rotateX - style effect desain
      3. CSS radial gradient
      maka efek seperti apapun bisa kita buat, semoga bermanfaat mas

      Hapus
  6. kalo ada waktu saya akan terpin deh tutornya,,,bokmark dulu yah hehe

    BalasHapus
  7. Tutorialnya keren2, tp bikin loading blog jd berat g neh?

    BalasHapus
  8. warna transisi memang menjadi cantiknya tampilan :)
    css nya banyak banget sist hehehe kpn kpn akan saya terapkan nih seperti nya dpt ide bagus :)
    buat thumbail juga bagus nih

    BalasHapus
  9. Postingan yang cukup membantu buat para Blogger. Kereeeeennnn
    Sory nih baru bs mampir karena kesibukan lain sampai blog sy aja terbengkalai.
    Lama ga mampir makin cantik aja blognya sis, kayak pemiliknya hehehe.
    sukses slalu, salam Blogger

    BalasHapus
  10. boleh dicoba buat halaman homepage nih :D sekalian difollow mbak :D

    BalasHapus
  11. di blog saya kenapa malah jadi vertical yah kalau lebih dari satu?
    minta pencerahan mba?

    BalasHapus
    Balasan
    1. responsive-kan ukuran gambarnya sob, seperti yang saya jelaskan diatas, tambahkan CSS untuk mengatur tata letak gambar agar sejajar rata atas, lalu sesuaikan jarak margin gambar 1 dengan gambar 2 dan seterusnya...

      Hapus
  12. css maksudnya kodenya di taruh dimana?

    BalasHapus
  13. ayo backlink mba' :)

    BalasHapus
  14. mau nanya mba, saya lg belajar2 jg, ini letak penaruhannya dmn ya, mksd pertanyaan saya, cth : apa dicopas diatas ]]> ?
    saya copas yg lengkapmya aja gpp atau bagaimana? cara penerapannya buat yg pemula masi membingungkan, maaf....
    tp terima kasih karena sudah memposting ini, ditunggu jwbnya ya... makasih :D

    BalasHapus
    Balasan
    1. sudah bisa deh, ngotak ngatik semaleman, makasih mba infonya...
      pertanyaanya di ubah, URL foto/gambar nya sudah saya paste di css nya, tp kok yg keluar cuma background warna merah seperti di gambar atas ya? apa hrs di re-size dulu gambar yg saya ingin masukan tsb?

      Hapus
    2. mksd saya, resolusi gambarnya hrs disamakan dulu dgn lingkaran hover-nya? supaya gambarnya muncul... terima kasih

      Hapus
    3. jika semuanya saya posting dengan posisi CSS hanya cukup untuk docopy paste, itu berarti tutorial ini bukan untuk pembelajaran attuh mas,,hehe..makanya saya pisahkan kode CSS diatas sebagai tantangan, sehingga jika ada yang ingin mencoba akan lebih banyak tahu dimana letak CSS itu seharusnya

      Hapus
    4. tapi saya salut mas, jika bisa menerapkan ini, sebagai jawaban dari saya, dalam menerapkan gambar, terlebih dahulu upload gambar ke picasa lalu upload ke blog untuk mendapatkan URLnya, gunanya agar loading muat gambar tidak terlalu berat saat di hover.
      selanjutnya untuk ukuran, ubah pada URL-gambar misalnya (s1600)menjadi (s200) sampai ketemu ukuran gambar yang maksimal sesuai lingkaran

      Hapus
    5. ahaha si mba nya sampai komen di blog saya, masi under reconstruction pdhl, emang lg belajar2nya... iya si mba buat tantangan, cumanya buat yg pemula spt saya, agak sulit diresapi nya... kalo yg udah advanced alias udah ada basic-nya si mudah... tp makasih ya mba info nya... heuheu

      Hapus
    6. mas kan juga komen di blog saya, jadi gak ada salahnya kan saya komen balik, sesama blogger akrab itu kan wajar,hehe..

      [blockquote]sesulit apa pun yang kita kerjakan, jika kita berani mencoba, maka kesananya akan terasa ringan karena terbiasa, tetapi SEMUDAH apapun yang kita lakukan tidak akan pernah bisa jika tidak berani melakukan percobaan, dengan begitu kita jadi paham seberapa jauh tingkat pemahaman kita, jika salah lakukan perbaikan,pasti nanti akan berhasil, hehe...[/blockquote]

      Hapus
  15. kak, gimana kalau saya mah template nya itu windows jadi harus di tempel di tata letak efek hover nya itu, tapi kan css susah di simpan di tata letak itu saya sudah coba, gax berfungsi kode css efek hover itu di simpan di tata letak itu, bagaimana kak solusinya..?

    BalasHapus
    Balasan
    1. bukannya tidak berfungsi, jika kode CSS diletakkan diluar template code, misalnya pada tata-letak, maka bungkus kode tersebut dengan atribut style tag <style>.contoh seperti ini:

      <style type="text/css">
      ...
      Letakkan CSS di sini
      ...
      </style>

      Hapus
  16. sudah bisa kak sekarang makh..??

    BalasHapus
  17. kak gimana kalau fotonya pengen jadi lima terus apabila di klik gambar nya itu gx sama..misalnya yang satu makh foto ini yang keduanya makh yang mana gtoh.

    BalasHapus
    Balasan
    1. Jika seperti itu jatuhnya kan seperti gallery gambar, gunakan sistem slider dengan arrow next-prev atau pagination,
      Lihat di sini ->

      Gallery Gambar

      bukan hanya 5 gambar, bahkan disana Anda bisa menyimpan 10,20 bahkan 100 gambar sesuka hati.

      Agar mencerminkan kalau kita sedang membahas sebuah pertanyaan,sebaiknya anda mengirim komentar dengan tombol balas saja, bukan komentar baru, karena sebelumnya komentar Anda sudah ditampilkan.
      Terimakasih

      Hapus
  18. Kan Saya Pilih nya yang seperti zodiak yang ada di Demo. Nah Apabila misalkan klik zodiak capricon fotonya yang mana gto ketika klik yang aries beda lagi dengan yang capricon nah gtoh maksudnya itu. jadi pengen di tambah nya itu di mana kode css (HTML) yang zodiak.
    mohon penjelasanya..!!

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK