CSS Membuat Pop Up Button Image

CSS Membuat Pop Up Button Image 

Tutorial CSS Membuat Pop Up Button mengeluarkan Image Variatif Zooming dengan CSS 3 pasti anda bingung dengan judul yang saya buat dipostingan ini. Saya juga bingung mau ngasih judul apa, hee. Intinya ketika Button diklik maka akan menampilkan image dengan efek hover zooming. 

Tutorial CSS Membuat Pop Up Button Image ini bisa kamu terapkan di blog kamu dengan sedikit modifikasi sesuain dengan kebutuhan di web/blog kamu.

Jika kamu masih bingung silahkan lihat demo di bawah ini :

Hot Panas

~ bagaimana Hot Bukan ~
Seperti itulah demonya, sangat sesuai judulnya yang aneh, hee..
Oke lanjut gan, jika memang anda tertarik silahkan embed script bawah ini :

<input class="popUpControl" id="popup" type="checkbox" />
<label class="elboton" for="popup">
  <span class="click">Gadis Hot</span>
  <span class="hiddenbox">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNCu90Oya-3r6R_4xskY3OS9woMt1-lG70RqDR4KcM9EfXa_Hr1LO4J1rupxfUkZfoVct4viroQYMnv02OMEExmksROSYUbtalpOtDem5Vvo2xlGHwW7eaSz8NatC_EphHTJSppM3w-ZNj/s1600/FMI201070104.jpg" />
  </span>
</label>
<style>
  .elboton {
    background-color: #f90e;
    border-radius: 10px;
    box-shadow: 0 0 10px #222 inset;
    color: #FFF;
    cursor: pointer;
    display: inline-block;
    font-size: 20px;
    margin: 0;
    padding: 5px 15px;
    position: relative;
    text-shadow: 1px 1px 1px #000;
  }

  .elboton br {display:none;}
   .hiddenbox {
    background-color: #FFF;
    border-radius: 10px;
    box-shadow: 0 0 15px #000 inset;
    left: 0;
    line-height: 0;
    margin: 25px 0;
    opacity: 0;
    padding: 15px;
    position: absolute;
    text-align: center;
    top: 100%;
    z-index: 100;
    -moz-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
  }

  .popUpControl:checked ~ label > .hiddenbox {
    opacity: 1;
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
  }

  .popUpControl {display: none;}
  .popUpControl:checked ~ label > span.click {display: none;}
  .popUpControl:checked ~ label:before {content: "Cabe Bugil";}
</style>

Silahkan disesuaikan dengan kebutuhan ente agan-agan.. ^_^

Salam Blogger Donomulyo.

Share this

Share on FacebookPlus on Google+