Efek Hover Gambar Dengan Desain Buka Tutup

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