Membuka Gambar Dengan Perintah Fungsi Klik

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:

DEMO SHOW

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.

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4Ohvs6o77iSoQBVgC22Snyw_8r5kjRbp_L8duZuPJ2c-wNtxe13L3ma8MpxQXD6oMLGPFfydJ7GHusM6azRgW-hDAZClRsfeD6mJtJLkw8HjRzb484bRdSSSy_U5-sL8gWhp0uAsbzeo/s1600/motor4.jpeg" width="270" height="150"></span>

<span class="pic">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtA6iHf-Y2gow8Bn6-MhmUO4J6lOHaLIfVaUB9baTvC5xovhH4OJtAsgl1AqOXTyrRb_8omQJXwYHOMIpOlqZwb-uSJuqwDyuuj-aerI7p947BGnWt8807H8t04XeE5k2gbvWiruKjFF0/s1600/motor2.jpeg" width="270" height="150"></span>

<span class="pic">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkuBxUIBuiGJ9NmEtc0PGNBtIibvzoEe_ax4ud9Owu4zgLMXxmp99_wFiiJnsZNjUvSglJF9bPTJD6derVczEnRkGlut3ukPn8FmwJ-_tZ1cixCfO9Jv30NnBgr_yMkF6mvvD1c9k8Fhw/s1600/motor3.jpeg" width="270" height="150"></span>

<span class="pic">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcNTvFX7jdHxjtgXENMFlcsYdGNSPi7kResNdq5J0Ufd-BcZ2doZ4Bo2Xn_11n-N6HDCj0NKPGhoyiD6RG1rueQV4RBAThrTdgc9xhUl7rJpfTxSi6vlNSF9g891JxqRtwCi5L0wxgCqY/s1600/motor1.jpeg" width="270" height="150"></span>
</div>