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:
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.
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:
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>
#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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSj-m1KX_vqhYbeQXIYbTDbsmXB_K5FkVqLmQH8gyzZAhnRH9ZUoVvKMGGuM6y00KQkcYpo1s6J6F58GC9IPMdy9VAPKsjgUBN7hFzRUnH8wbx5WBkqJ0uivVuk7xMDrmHSsMjqbg22cU/s1600/motor4.jpeg" width="270" height="150"></span>
<span class="pic">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCAbNZTehUUhbFAazJDH_D0eX5YsVo0V61x6VGke_mJUQuWauFRSxxpnV5c5QyTGiEywFg3wQ8uzgTMCwMaSVVBSS79_jIjWXYoHXlltY9Kj1Ad9KP1uypRwfdVVUkjhipupYcUFRZifQ/s1600/motor2.jpeg" width="270" height="150"></span>
<span class="pic">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis4g-DPWHbYKGhEWv0C9LUbsA9LBW0MSdbncR1efI0eD-5t4fVxosRh4mGklZ_5Xf5699DpQn3e8tGs98jQA5jEUEL5DQDaIsOFB_OlpT0ax_2oGTEja6u5Bp2t9Tnit-47HTKFo-IVtY/s1600/motor3.jpeg" width="270" height="150"></span>
<span class="pic">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTZS5-Lzu1jCqX3bYRbdiTgVXuWEofcWzsad1vx40kLzGCH5a3JP4IzaWDrgPSyuNgw2sYhtyDMwUJbu5-zJJ2llbA0y8jwRHSIWQpqEIS01uaBIkfINfg2qwGDYGfP5FEDt4H0Bf18NA/s1600/motor1.jpeg" width="270" height="150"></span>
</div>
<label for="click" id="cover">CLICK HERE</label>
<div id="open-img">
<span class="pic">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSj-m1KX_vqhYbeQXIYbTDbsmXB_K5FkVqLmQH8gyzZAhnRH9ZUoVvKMGGuM6y00KQkcYpo1s6J6F58GC9IPMdy9VAPKsjgUBN7hFzRUnH8wbx5WBkqJ0uivVuk7xMDrmHSsMjqbg22cU/s1600/motor4.jpeg" width="270" height="150"></span>
<span class="pic">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCAbNZTehUUhbFAazJDH_D0eX5YsVo0V61x6VGke_mJUQuWauFRSxxpnV5c5QyTGiEywFg3wQ8uzgTMCwMaSVVBSS79_jIjWXYoHXlltY9Kj1Ad9KP1uypRwfdVVUkjhipupYcUFRZifQ/s1600/motor2.jpeg" width="270" height="150"></span>
<span class="pic">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis4g-DPWHbYKGhEWv0C9LUbsA9LBW0MSdbncR1efI0eD-5t4fVxosRh4mGklZ_5Xf5699DpQn3e8tGs98jQA5jEUEL5DQDaIsOFB_OlpT0ax_2oGTEja6u5Bp2t9Tnit-47HTKFo-IVtY/s1600/motor3.jpeg" width="270" height="150"></span>
<span class="pic">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTZS5-Lzu1jCqX3bYRbdiTgVXuWEofcWzsad1vx40kLzGCH5a3JP4IzaWDrgPSyuNgw2sYhtyDMwUJbu5-zJJ2llbA0y8jwRHSIWQpqEIS01uaBIkfINfg2qwGDYGfP5FEDt4H0Bf18NA/s1600/motor1.jpeg" width="270" height="150"></span>
</div>
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul= Membuka Gambar Dengan Perintah Fungsi Klik
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 >>
bagus mbak hasilnya, jadi dalam satu frame bisa diisi banyak gambar ya :)
BalasHapusBetul ya Kang Ucup jadi menarik membuat gambar
HapusCantik jadi lebih Cantik ka diatas tuh... hhhh :)
kurang lebih seperti itu kang ucup, hehe
Hapuskalau saya lebih kagum sama gambar motornya mas saud, hehe,, kalau kagum sama gambar pertama kan gak mungkin, masa kagum sama diri sendiri, hehe
HapusWah boleh juga ni dipakai mba' devi triknya, tapi berat g ya mba sama loading blog?
Hapusnotebane kode CSS lebih ringan dibandingkan js jika membuat sebuah tampilan efek, terlebih jika menyangkut tentang penggunaan gambar,
Hapusjika 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.
Jadi berpariatf ya Mbak tampilan gambar nantinya jika memakai
BalasHapusTutorial ini, an ini bisa membuat desain template blog menjadi
Indah dan mengesankan jadinya. makasih atas berbaginya Mbak Devy :)
terimakasih kembali mas saud atas kunjungannya.
Hapusbisa aja nih kang saud memuji nd ngerayu adminnya
Hapus:d :d :-) (c)
bukan ngerayu kang jum, tetapi menggombal, hehe,, (sama aja ya)
Hapusgak apa-apa kang, biar diantara sesama sahabat blogger terlihat akrab, bukan begitu kang.?
Blogku gak bisa di klik kanan :D
BalasHapuspindahkan mousenya kesebelah kiri mbak, biar jadinya klik kiri, hehe
Hapusberarti menghilangkan satu kode penghubung sj dpt berpengaruh dgn efek tampilan ya Vy..!..
BalasHapusinih memang membutuhan
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,
Hapusada 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
ooo.. begitu rupanya..!,
Hapustp 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..
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..
Hapusdampak 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.
wadduh..! nda usah Vy..nda usah..!,
HapusVy jangan.. :-# ke mail..!
makin keren aja ya gambar nya kalau dikasih perintah fungsi klik ini, jadi bisa bikin pengunjung terkagum-kagum sama blog kita :D
BalasHapussedikit mencuri perhatian mereka mbak, biar betah sdan selalu cinta dengan blog ini, hehe..
HapusBTW terimakasih atas kunjungannya ya mbak rin.!
Bagus ya untuk yang banyak gambar, sayang aku sebaliknya.
BalasHapusaduuh saya bingung,pengen mencoba-coba bikin yang cantik-cantik di template gak bisa pake hape..
BalasHapuskan bisa diterapkan nanti saat menggunakan PC mas. hehe..
HapusYang efek 3D keren tu mba' Devy,
BalasHapuso iya salam kenal ya mba :) cheer
salam kenal kembali dan terimakasih atas kunjungannya.
Hapuswah keren, ijin bookmark ya
BalasHapusdibawa pulang juga gak apa-apa kok mas, hehe
Hapuswah tinggal pake, makasih mba
BalasHapuskeren hasilnya
keren banget efeknya, tinggal menerapkan dengan menambahkan keterangan artikel atau teks untuk gambarnya
BalasHapuskeren bngt gan :d
BalasHapustrimakasih mbak dev untuk artikelnya...akhir2 ini lagi belajar gituan... :D
BalasHapuswiiihh kreeennnnnnnnn saya jadi kpengen pasang nihh mbak :D
BalasHapuskode css nya gak bisa di paketin jadi "script.css" ya? supaya menghemat tempat gtu mba :-d
BalasHapusbisa mas dengan kompres, sehingga bentuk css sejajar dengan script, akan tetapi google code akhir-akhir ini tidak bisa di update.
Hapuslagipula 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?
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
BalasHapussaudah 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:
HapusLihat Pada Label Gambar
► Label Menu Image Effect
tampilan menu keluarnya keren ya mbak :D
BalasHapusinfo jelas; blog nya keren mba, salam kenal (h) http://tamuilmu.blogspot.com
BalasHapuskeren,,, ini bisa di jadiin menu perintah juga ya,,, angat jempol buat mbak...
BalasHapus