Membuka Gambar Dengan Perintah Fungsi Klik - Cara ini merupakan kegiatan menumpuk gambar dalam satu area, namun untuk membuka gambar tersebut saya menggunakan fungsi perintah "KLIK" mouse seperti Membuat Efek Figure According Pada Gambar diartikel sebelumnya seperti ini:






New Info Pengenalan Elemen CSS Target


Dengan membuat sebuah Tombol Link sebagai tampilan sampul gambar, yang sebenarnya agar gambar yang sudah Anda susun secara menumpuk tadi tidak terlihat saat tampilan default, sehingga untuk membuka salah satu gambar Anda, maka klik tombol tersebut sebagai pemicu.
Agar hasilnya terlihat menarik, saya menambahkan efek transisi pada saat gambar akan ditampilkan dengan perintah "Hover". Gambar akan terbuka dengan lebar 20px saat tombol sudah Anda KLIK, sedangkan untuk melihat gambar secara fullscreen, Anda cukup sentuh gambar tersebut, maka gambar akan terbuka pada area masing-masing (top, right, bottom, left), seperti ini:


Open Image On Click Show




DEMO SHOW




Sebenarnya semua deklerasi susunan kode CSS seperti ini, mirip saat membuat menu dengan efek accordion slide, karena disini saya hanya mengganti semua fungsi tampilan, fungsi perintah seperti a:link dengan nilai href saya hapus dan saya gantikan dengan url-gambar, sehingga saat TOMBOL di klik tidak mengarah pada sebuah halaman tertentu.


CSS
<style type='text/css'>
#cover {
  margin: 0 auto;
  display: block;
  position: absolute;
  top: 0;right: 0;
  bottom: 0;left: 0;
  width: 270px;height: 150px;
  background: #fafafa;
  font: bold 28px/150px "Lato",serif;
  text-align: center;
  color: red;cursor: pointer;
  -webkit-transition: all 0.25s;
  -moz-transition: all 0.25s;
  -ms-transition: all 0.25s;
  -o-transition: all 0.25s;
  transition: all 0.25s;
  z-index: 125;}

#cover:hover {background: #6495ED;color: #fff;}
#open-img {
  margin: 0 auto;
  padding: 0;display: block;
  position: absolute;
  top: 0;right: 0px;bottom: 0;left: 0;
  width: 270px;height: 150px;
  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s;
  -ms-transition: all 0.1s;
  -o-transition: all 0.1s;
  transition: all 0.1s;
  z-index: 100;}

.pic {
  margin: 0;padding: 0;
  display: block;position: absolute;
  top: 0;right: 0;bottom: 0;left: 0;
  width: 270px;height: 150px;
  cursor: pointer;
  -webkit-transition: all 0.25s;
  -moz-transition: all 0.25s;
  -ms-transition: all 0.25s;
  -o-transition: all 0.25s;
  transition: all 0.25s;}

.pic:hover {color: #fafafa;}
.pic:active {color: #7a3fae;}
#click {display: none;}
#click:checked ~ #cover {background: #111;color: #fafafa;}
#click:checked ~ #open-img .pic:nth-child(1) {top:-20px;}
#click:checked ~ #open-img .pic:nth-child(1):hover {top:-150px;}
#click:checked ~ #open-img .pic:nth-child(2) {left:20px;}
#click:checked ~ #open-img .pic:nth-child(2):hover {left:270px;}
#click:checked ~ #open-img .pic:nth-child(3) {top:20px;}
#click:checked ~ #open-img .pic:nth-child(3):hover {top:150px;}
#click:checked ~ #open-img .pic:nth-child(4) {left:-20px;}
#click:checked ~ #open-img .pic:nth-child(4):hover {left:-270px;}
</style>



HTML
<input type="checkbox" name="click" id="click"/>
<label for="click" id="cover">CLICK HERE</label>
<div id="open-img">
<span class="pic">
<img alt="" src="http://1.bp.blogspot.com/-KjlDxpsI5kY/VDfXDrSJ3NI/AAAAAAAAA9s/ov94-jnKCLs/s1600/motor4.jpeg" width="270" height="150"></span>

<span class="pic">
<img alt="" src="http://2.bp.blogspot.com/-iYRT8Q80Rxc/VDfWzQgmKlI/AAAAAAAAA9U/XGRZrDBnGGU/s1600/motor2.jpeg" width="270" height="150"></span>

<span class="pic">
<img alt="" src="http://2.bp.blogspot.com/-rxqd4VguXQI/VDfWzW11vxI/AAAAAAAAA9Q/OKWIAmSpVjw/s1600/motor3.jpeg" width="270" height="150"></span>

<span class="pic">
<img alt="" src="http://2.bp.blogspot.com/-hrGSlQrEfsY/VDfWzAX2tYI/AAAAAAAAA9M/LdTDyUNQUH0/s1600/motor1.jpeg" width="270" height="150"></span>
</div>

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuka Gambar Dengan Perintah Fungsi Klik
Ditulis oleh= Devy Indriyani
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 =

38 komentar

  1. bagus mbak hasilnya, jadi dalam satu frame bisa diisi banyak gambar ya :)

    BalasHapus
    Balasan
    1. Betul ya Kang Ucup jadi menarik membuat gambar
      Cantik jadi lebih Cantik ka diatas tuh... hhhh :)

      Hapus
    2. kurang lebih seperti itu kang ucup, hehe

      Hapus
    3. kalau saya lebih kagum sama gambar motornya mas saud, hehe,, kalau kagum sama gambar pertama kan gak mungkin, masa kagum sama diri sendiri, hehe

      Hapus
    4. Wah boleh juga ni dipakai mba' devi triknya, tapi berat g ya mba sama loading blog?

      Hapus
    5. notebane kode CSS lebih ringan dibandingkan js jika membuat sebuah tampilan efek, terlebih jika menyangkut tentang penggunaan gambar,

      jika khawatir pada speed blog, mas bisa kompres gambar dan kodenya, karena jika saya jelaskan disini, yang ada menjadi bahan cerita nantinya, hehe.. yang terpenting pemahaman kode dan penempatan, jika sudah tahu maka tidak ada lagi hal yang harus ditakutkan tentang speed.

      Hapus
  2. Jadi berpariatf ya Mbak tampilan gambar nantinya jika memakai
    Tutorial ini, an ini bisa membuat desain template blog menjadi
    Indah dan mengesankan jadinya. makasih atas berbaginya Mbak Devy :)

    BalasHapus
    Balasan
    1. terimakasih kembali mas saud atas kunjungannya.

      Hapus
    2. bisa aja nih kang saud memuji nd ngerayu adminnya
      :d :d :-) (c)

      Hapus
    3. bukan ngerayu kang jum, tetapi menggombal, hehe,, (sama aja ya)

      gak apa-apa kang, biar diantara sesama sahabat blogger terlihat akrab, bukan begitu kang.?

      Hapus
  3. Blogku gak bisa di klik kanan :D

    BalasHapus
    Balasan
    1. pindahkan mousenya kesebelah kiri mbak, biar jadinya klik kiri, hehe

      Hapus
  4. berarti menghilangkan satu kode penghubung sj dpt berpengaruh dgn efek tampilan ya Vy..!..
    inih memang membutuhan

    BalasHapus
    Balasan
    1. benar sekali mas Al, jangankan tanda hubung, menghilangkan atau tidak menyertakan tanda berupa titik ( . ) saja dalam susunan kode, maka akan mengartikan hal yang berbeda, sama hanya pada susunan markup HTML,

      ada beberapa template yang dapat membaca tanda kutip dua ( " ), sehingga harus kita ganti menjadi kutip satu ( ' ) tetapi ada juga yang tidak merespon kode tersebut, sehingga mengatakan, "efeknya tidak sesuai dengan template blog saya"
      hal seperti inilah yang harus jeli kita perhatikan saat mengedit sebuah tampilan template jika secara langsung berhubungan dengan markup kode HTML

      Hapus
    2. ooo.. begitu rupanya..!,
      tp sy bingung Vy..!, misalkan sy ganti template, knapa ya.. di demo template gratisan saat diterapkan dihtml blog tampilannya ada yg tidak sesuai.. padahal kalau diperhatikan/membandingkan (inspect ya Vy..) susunan kode2nya tidak ada yg ilang.. ini sy buktikan saat memperbaiki form pencariaan.. susahnya minta ampun ,.. begadang beberapa hari baru bisa.. bagaimmana dgn form komentr skrg..:(

      beda dengan maksimalkan speed laman..kebetulan ada mas Dory yg bantu, rela begadang sama2 Vy..! (blog seo friendly),. panduan2 beliau mencerahkan.. jadinya gak takut untuk ganti template..karna sdh sedikit paham bagaiman cara optimalkan speed..
      tp ini dampaknya..!, pasti ada kode yg nda bisa kebaca,. mau otakatik kode ,..tdk ada dasar sama sekali jg tidak ada tempat tuk mengadu..hihihihi.., (sabar2.. sambil urut kepala)

      oiyya Vy..!, kode quote ya?, jgn dipatenkan., lg pake inih,. kalau mesti bayar.. nda punya cash. hidup sj sudah terlunta lunta nda ada yg urus, becak yg skrg sy pake untuk ngais rejeki lagi masuk bengkel..cqcqcqc.. mana betis sdh mau meletus inih..

      Hapus
    3. bukan hanya speed laman yang wajib kita perbaiki, walau hal ini merupakan faktor yang sangat penting, tetapi berbagi dan saling mengisi pada komentar juga tidak kalah penting loh mas,heheh..

      dampak kode yang tidak kebaca bukan kesalahan template seutuhnya mas, faktor lain seperti browser yang tidak dapat merespon kode tersebut juga berpengaruh.. kalau tentang kode-kode pada tutorial devy, sebelum siap untuk dipublikasikan, biasanya saya uji dahulu pada browser lain, kalau sudah tidak ada masalah barulah saya terbitkan.

      [blockquote]Oh..iya mas tentang tutorial komentar yang mas request belum bisa devy terbitkan ya, karena editor google code lagi error saat pengujian, maaf ya mas, tetapi tidak akan lama akan devt coba lagi nanti, mudah-mudahan berhasil[/blockquote]

      seipp..!! kode itu tidak akan devy patentkan, terkecuali kode yang menyangkut js, pasti saya beri lisensi.

      Hapus
    4. wadduh..! nda usah Vy..nda usah..!,

      Vy jangan.. :-# ke mail..!

      Hapus
  5. makin keren aja ya gambar nya kalau dikasih perintah fungsi klik ini, jadi bisa bikin pengunjung terkagum-kagum sama blog kita :D

    BalasHapus
    Balasan
    1. sedikit mencuri perhatian mereka mbak, biar betah sdan selalu cinta dengan blog ini, hehe..
      BTW terimakasih atas kunjungannya ya mbak rin.!

      Hapus
  6. Bagus ya untuk yang banyak gambar, sayang aku sebaliknya.

    BalasHapus
  7. aduuh saya bingung,pengen mencoba-coba bikin yang cantik-cantik di template gak bisa pake hape..

    BalasHapus
    Balasan
    1. kan bisa diterapkan nanti saat menggunakan PC mas. hehe..

      Hapus
  8. Yang efek 3D keren tu mba' Devy,
    o iya salam kenal ya mba :) cheer

    BalasHapus
    Balasan
    1. salam kenal kembali dan terimakasih atas kunjungannya.

      Hapus
  9. Balasan
    1. dibawa pulang juga gak apa-apa kok mas, hehe

      Hapus
  10. wah tinggal pake, makasih mba
    keren hasilnya

    BalasHapus
  11. keren banget efeknya, tinggal menerapkan dengan menambahkan keterangan artikel atau teks untuk gambarnya

    BalasHapus
  12. trimakasih mbak dev untuk artikelnya...akhir2 ini lagi belajar gituan... :D

    BalasHapus
  13. wiiihh kreeennnnnnnnn saya jadi kpengen pasang nihh mbak :D

    BalasHapus
  14. kode css nya gak bisa di paketin jadi "script.css" ya? supaya menghemat tempat gtu mba :-d

    BalasHapus
    Balasan
    1. bisa mas dengan kompres, sehingga bentuk css sejajar dengan script, akan tetapi google code akhir-akhir ini tidak bisa di update.

      lagipula lebih ke notebane konsep kode mas, jika saya ubah menjadi script, akan memberatkan loading blog, karena penggunaan CSS murni lebih ringan dibanding js, walau kode css tersebut sebanyak dan sepanjang apa?

      Hapus
  15. kebetulan sekali mbak indri, saya lagi nyari cara seperti ini. tapi pengennya sih yang slide gambar seperti di playstore, klo sempet kasih tahu caranya mbak indri,,,terima kasih

    BalasHapus
    Balasan
    1. saudah banyak devy share mas efek seperti itu, bahkan devy pernah share tentang gambar gerak layaknya pembuatan "Space Iklan". kalau mas Catur tidak keberatan, mas bisa lihat-lihat koleksi efek gambar saya pada label ini:

      Lihat Pada Label Gambar
      Label Menu Image Effect

      Hapus
  16. tampilan menu keluarnya keren ya mbak :D

    BalasHapus
  17. info jelas; blog nya keren mba, salam kenal (h) http://tamuilmu.blogspot.com

    BalasHapus
  18. keren,,, ini bisa di jadiin menu perintah juga ya,,, angat jempol buat mbak...

    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