Make PopUp with CSS 3

Sepertinya urusan trick and tips mengenai CSS harus selalu mengunjungi halaman blog ini berikut All About CSS :D Artikel terbaru mengenai Fold Out Popups by CSS Tricks dikreasikan kembali oleh master JMiur menjadi Pop-Up sólo con CSS menghasilkan menyembunyikan image menjadi sebuah link, ketika di klik akan tampil deh image yang tersembunyi tersebut ;))
Mirip dengan trik berikut kinerjanya nih popup with CSS. Bedanya hanya pada proses, diklik dan disorot doang :P Satu kesamaan kalau urusan sembunyi-sembunyi konten tidak lain untuk mempercepat loading, macam spoiler ;))

Beben Koben si bloglang anu ganteng kalem tea punya satu ramuan sederhana untuk menampilkan gambar besar, namun ditampilkan dengan gambar yang kecil ukurannya. Like this...
Hehehe...simpel dan sederhana namun kalau tidak tau kodenya sama juga susah :P<img onclick="javascript:this.width=500;this.height=350" ondblclick="javascript:this.width=100;this.height=75" src="URL image add here yaw!!!" width="100"/>

Ket:

• width & height
Lebar dan tinggi gambar ketika sudah diklik.
• width & height
Tinggi dan lebar gambar saat ditampilkan.

Kode modifikasi Popup with CSS 3

Demo:   Bukain Konten

CSS 3 Pop-Up

.gim {
background-color: #333;
border-radius: 10px;
border: 1px solid red;
color: #FFF;
cursor: pointer;
display: inline-block;
margin: 0;
padding: 5px 10px;
position: relative !important;
}

.kotak {
position: absolute;
left: 0;
top: 100%;
z-index: 100;
-webkit-backface-visibility: hidden;
background-color: #eeeeee;
background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#999999));
background-image: -webkit-linear-gradient(top, #eeeeee, #999999);
background-image: -moz-linear-gradient(top, #eeeeee, #999999);
background-image: -ms-linear-gradient(top, #eeeeee, #999999);
background-image: -o-linear-gradient(top, #eeeeee, #999999);
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
width: auto;
padding: 20px;
margin: 24px 0;
opacity: 0;
-webkit-transform: scale(0) skew(50deg);
-moz-transform: scale(0) skew(50deg);
-ms-transform: scale(0) skew(50deg);
-o-transform: scale(0) skew(50deg);
-webkit-transform-origin: 0px -30px;
-moz-transform-origin: 0px -30px;
-ms-transform-origin: 0px -30px;
-o-transform-origin: 0px -30px;
-webkit-transition: -webkit-transform ease-out .35s, opacity ease-out .4s;
-moz-transition: -moz-transform ease-out .35s, opacity ease-out .4s;
-ms-transition: -ms-transform ease-out .35s, opacity ease-out .4s;
-o-transition: -o-transform ease-out .35s, opacity ease-out .4s;
}

.kotak:after {
content: "";
position: absolute;
bottom: 100%;
left: 30px;
border-bottom: 20px solid #eee;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
width: 0;
height: 0;
}

.popUpControl:checked ~ label > .kotak {
opacity: 1;
-webkit-transform: scale(1) skew(0deg);
-moz-transform: scale(1) skew(0deg);
-ms-transform: scale(1) skew(0deg);
-o-transform: scale(1) skew(0deg);
}
.popUpControl {
display: none;
}

.kotak img {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#brot:checked ~ label > span:first-child {
display: none;
}
#brot:checked ~ label:before {
content: "Hilangkan Konten";
}

Kode HTML<input type="checkbox" id="brot" class="popUpControl"/>
<label for="brot" class="gim">
<span>Bukain Konten</span>
<span class="kotak">

<img src="http://blah-bleh-bloh.jpg"/>

</span>
</label>Happy popups \m/