Cara Membuat Gallery Gambar Efek Hover

Senin, September 23, 2013

Selamat Sore Sob Kali ini saya nggak tau mau ngasih judul apa untuk postingan kali ini sepintas postingan ini mirip sama postingan mas oktri tetapi saya meredesignnya agar tidak sama hehe untuk menghemat waktu langsung saja.Kemungkinan CSS3 hanya mulai diterapkan dan entah bagaimana, tidak terbatas. Pilihannya dan umumnya cukup sederhana untuk diterapkan. Dalam kasus ini, 'Gem' mengajarkan bagaimana melakukan serangkaian efek asli yang dibuat oleh codrops. Di sini, saya hanya akan mencoba untuk memutar salah satu dari mereka tapi sisanya dapat dilihat dalam demo dibawah.

Mereka semua memiliki struktur yang serupa dalam html DIV dengan beberapa kelas CSS (tampilan), tambahkan gambar yang ukurannya mendefinisikan sisa properti dan kemudian lain DIV yang disembunyikan (mask) dan yang isinya bisa bervariasi.

HTML::

<div class="view">

  <img src="URL-IMAGE" />

  <div class="mask">

    <h4> JUDUL </h4>

    <p> Keterangan </p>

    <a href="#" class="info"> ReadMore </a>

</div>

</div>

CSS::

.view {

border: 10px solid #FFF;

    cursor: pointer;

    height: 188px;

    margin: 0 auto;

    overflow: hidden;

    position: relative;

    text-align: center;

    width: 300px;

  }

  .view img {

    display: block;

    position: relative;

    -moz-transition: all 0.5s ease-out;

    -webkit-transition: all 0.5s ease-out;

    -o-transition: all 0.5s ease-out;

    transition: all 0.5s ease-out;

    opacity: 1;

    filter: alpha(opacity=100);

  }

  .view:hover img {

    -moz-transform: rotate(720deg) scale(0);

    -webkit-transform: rotate(720deg) scale(0);

    -o-transform: rotate(720deg) scale(0);

    -ms-transform: rotate(720deg) scale(0);

    transform: rotate(720deg) scale(0);

    opacity: 0;

    filter: alpha(opacity=0);

  }

  .view .mask {

    background-color: #ABC;

    height: 188px;

    left: 0;

    position: absolute;

    overflow: hidden;

    top: 0;

    width: 300px;

    -moz-transform: rotate(0deg) scale(1);

    -webkit-transform: rotate(0deg) scale(1);

    -o-transform: rotate(0deg) scale(1);

    -ms-transform: rotate(0deg) scale(1);

    transform: rotate(0deg) scale(1);

    -moz-transition: all 0.3s ease-out;

    -webkit-transition: all 0.3s ease-out;

    -o-transition: all 0.3s ease-out;

    transition: all 0.3s ease-out;

    opacity: 0;

    filter: alpha(opacity=0);

  }

  .view:hover .mask {

    -moz-transform: translateY(0px) rotate(0deg);

    -webkit-transform: translateY(0px) rotate(0deg);

    -o-transform: translateY(0px) rotate(0deg);

    -ms-transform: translateY(0px) rotate(0deg);

    transform: translateY(0px) rotate(0deg);

    -moz-transition-delay: 0.4s;

    -webkit-transition-delay: 0.4s;

    -o-transition-delay: 0.4s;

    transition-delay: 0.4s;

    opacity: 1;

    filter: alpha(opacity=100);

  }

  .view h4 {

    background-color: rgba(255, 255, 255, 0.5);

    color: #FFF;

    text-align: center;

    position: relative;

    font-family: Georgia;

    font-size: 20px;

    margin: 20px 0 0 0;

    padding: 5px 0;

    text-shadow: 0 3px 1px #000;

    -moz-transform: translateY(-200px);

    -webkit-transform: translateY(-200px);

    -o-transform: translateY(-200px);

    -ms-transform: translateY(-200px);

    transform: translateY(-200px);

    -moz-transition: all 0.2s ease-in-out;

    -webkit-transition: all 0.2s ease-in-out;

    -o-transition: all 0.2s ease-in-out;

    transition: all 0.2s ease-in-out;

  }

  .view:hover h4 {

    -moz-transform: translateY(0px);

    -webkit-transform: translateY(0px);

    -o-transform: translateY(0px);

    -ms-transform: translateY(0px);

    transform: translateY(0px);

    -moz-transition-delay: 0.7s;

    -webkit-transition-delay: 0.7s;

    -o-transition-delay: 0.7s;

    transition-delay: 0.7s;

  }

  .view p {

    color: #000;

    font-family: Tahoma;

    font-size: 13px;

    margin: 0;

    padding: 15px;

    position: relative;

    text-align: center;

    text-shadow: 1px 1px 1px #FFF;

    -moz-transform: translateY(-200px);

    -webkit-transform: translateY(-200px);

    -o-transform: translateY(-200px);

    -ms-transform: translateY(-200px);

    transform: translateY(-200px);

    -moz-transition: all 0.2s ease-in-out;

    -webkit-transition: all 0.2s ease-in-out;

    -o-transition: all 0.2s ease-in-out;

    transition: all 0.2s ease-in-out;

  }

  .view:hover p {

    -moz-transform: translateY(0px);

    -webkit-transform: translateY(0px);

    -o-transform: translateY(0px);

    -ms-transform: translateY(0px);

    transform: translateY(0px);

    -moz-transition-delay: 0.6s;

    -webkit-transition-delay: 0.6s;

    -o-transition-delay: 0.6s;

    transition-delay: 0.6s;

  }

  .view a.info {

    background-color: #456;

    border-radius: 5px;

    box-shadow: 0 0 2px #FFF, 0 0 5px #FFF inset;

    color: #FFF;

    display: inline-block;

    padding: 7px 14px;

    text-decoration: none;

    -moz-transform: translateY(-200px);

    -webkit-transform: translateY(-200px);

    -o-transform: translateY(-200px);

    -ms-transform: translateY(-200px);

    transform: translateY(-200px);

    -moz-transition: all 0.2s ease-in-out;

    -webkit-transition: all 0.2s ease-in-out;

    -o-transition: all 0.2s ease-in-out;

    transition: all 0.2s ease-in-out;

  }

  .view a.info:hover {

    box-shadow: 0 0 5px #FFF;

  }

  .view:hover a.info {

    -moz-transform: translateY(0px);

    -webkit-transform: translateY(0px);

    -o-transform: translateY(0px);

    -ms-transform: translateY(0px);

    transform: translateY(0px);

    -moz-transition-delay: 0.5s;

    -webkit-transition-delay: 0.5s;

    -o-transition-delay: 0.5s;

    transition-delay: 0.5s;

  }

HASILNYA Sob :D

Avenged Sevenfold

A7x Adalah Band Asal Amerika Serikat Yang Terbentuk Pada Tahun 1999 bla...bla...bla
ReadMore

NB: CSS Ditaruh Diatas  ]]></b:skin> Sedangkan HTML Bisa Ditaruh Dimana Saja :D

Buruan Pasang Iklan Anda Di DHE Dengan Harga Yang Terjangkau.Pajang bisnis online anda di DHE dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.

Buruan Pasang Iklan Anda Di DHE Dengan Harga Yang Terjangkau.Pajang bisnis online anda di DHE dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.