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/AVvXsEhJP9cafsdwfzzUQDSdgkMAyNSZ8uIjKJGpbFT4FLro7J5z1hueHzK2tQsAUWmLpnoQjJUSkFtT7_HeKP7Ebu0xJj4sb-T64SAKJxCaPyDSG07HyOGvnm6ajvRxcsOWRzpEILPl5LV6vLI/s1600/motor4.jpeg" width="270" height="150"></span>
<span class="pic">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnHuXXmjiIu8L3rUQdoW_7e1MOC9Fd8KaojdFi2hTtk7a3Fp98QCJI7LtXzh8BtAAjMqV_xojHEonNinScQZOjVI3AvMKfWA3T7TRvbFFNSLohhjTtdTbOsOoUQDxSNs_eYGLvIpIgLsQ/s1600/motor2.jpeg" width="270" height="150"></span>
<span class="pic">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYGGDLsgV_PjZP0eQdPVm9cweEeIUlKflU-3qsKba7-HtN0hpyOxGalEo8v46C8qgwTQJ6AtGK1VjA53XEER28jMh21tqDz_hZj7sqN9ktLmHVfbPkG1BQokwjsEgQCYMiBVBz5FzJUzU/s1600/motor3.jpeg" width="270" height="150"></span>
<span class="pic">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1oFEhYOJbK6hc6b_SflWrmDHi_UlO7UNkuOrHvdPRSRcq_wvePwmmhY64m8sbwdfpBE4Ay3zS9vEMVqJJ1OhglEUHlOogpl2UP2qiwjXJXJhfuAqk4Vafa9KkC7LrirElDn8a6ej5NWw/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/AVvXsEhJP9cafsdwfzzUQDSdgkMAyNSZ8uIjKJGpbFT4FLro7J5z1hueHzK2tQsAUWmLpnoQjJUSkFtT7_HeKP7Ebu0xJj4sb-T64SAKJxCaPyDSG07HyOGvnm6ajvRxcsOWRzpEILPl5LV6vLI/s1600/motor4.jpeg" width="270" height="150"></span>
<span class="pic">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnHuXXmjiIu8L3rUQdoW_7e1MOC9Fd8KaojdFi2hTtk7a3Fp98QCJI7LtXzh8BtAAjMqV_xojHEonNinScQZOjVI3AvMKfWA3T7TRvbFFNSLohhjTtdTbOsOoUQDxSNs_eYGLvIpIgLsQ/s1600/motor2.jpeg" width="270" height="150"></span>
<span class="pic">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYGGDLsgV_PjZP0eQdPVm9cweEeIUlKflU-3qsKba7-HtN0hpyOxGalEo8v46C8qgwTQJ6AtGK1VjA53XEER28jMh21tqDz_hZj7sqN9ktLmHVfbPkG1BQokwjsEgQCYMiBVBz5FzJUzU/s1600/motor3.jpeg" width="270" height="150"></span>
<span class="pic">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1oFEhYOJbK6hc6b_SflWrmDHi_UlO7UNkuOrHvdPRSRcq_wvePwmmhY64m8sbwdfpBE4Ay3zS9vEMVqJJ1OhglEUHlOogpl2UP2qiwjXJXJhfuAqk4Vafa9KkC7LrirElDn8a6ej5NWw/s1600/motor1.jpeg" width="270" height="150"></span>
</div>
Demikian artikel tentang Membuka Gambar Dengan Perintah Fungsi Klik ini dapat kami sampaikan, semoga artikel atau info tentang Membuka Gambar Dengan Perintah Fungsi Klik ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.
