Practice Makes Right,repetitions Make Perpect.

Tentang Blog Ini ×

B log Ini merupakan media saya untuk berbagi segala hal yang berhubungan tentang blogging meskipun masih sederhana,Mand4rt juga merupakan media saya dalam menuangkan hasil karya sekaligus tempat saya belajar membangun sebuah blog/website dan berharap untuk tetap bisa memberikan yang terbaik kepada pembaca.

Aura Template

T emplate yang saya gunakan ini merupakan buatan saya sendiri, Banyak yang mengatakan bahwasanya DHE adalah template hasil cloningan secara utuh namun tidak demikian template ini saya susun dari sangat dasar dengan pemahaman yang sedikit awam dan otodidak dalam pembuatannya saya berusaha meniru tampilan beberapa template yang pernah dipakai oleh:

DTE :] web.id

Tentang Saya

S

alam pembuka dari saya sebagai penulis blog ini sebelumnya akan memperkenalkan diri saya sebagai salah satu blogger yang berasal dari Provinsi Sulawesi Barat Dan Saya Bersekolah Di SMA Neg 1 Polewali.Nama saya Haekal Fikri akrab dipanggil Haekal. Saya Tidak Mempunyai Guru Saya Belajar Secara Otodidak Beserta Bantuan Dari Teman-teman blogger saya dan saya masih NEWBIE Jadi jika Saya Tidak Dapat Menjawab Pertanyaan Anda Tentang Seputar Blogging Harap Di Maklumi.
iklan
Bagikan kepada teman!

Cara Membuat Gallery Gambar Efek Hover

Cara Membuat Gallery Gambar Efek Hover


http://1.bp.blogspot.com/-9QahUkhkhOM/T9FVQQroupI/AAAAAAAABFQ/ZmAtgpDicks/s1600/css3.jpg

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

iklanBuruan 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.
iklanBuruan 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.
Diposkan Oleh ❖
  • Iklan Teks Murah

    Hanya Rp.5.000/bulan, Pasang Iklan Teks Anda Disini Sekarang Juga!

  • Iklan Teks Murah

    Hanya Rp.5.000/bulan, Pasang Iklan Teks Anda Disini Sekarang Juga!

  • Iklan Teks Murah

    Hanya Rp.5.000/bulan, Pasang Iklan Teks Anda Disini Sekarang Juga!

22 Komentar

Anonim Permalink
Wew kereeen mas. Mantap...
Permalink
Buset keren dah , ngomong" suka A7X yah sob ?? ^:D
Permalink
Wow, keren :p :D
Permalink
wach pertama ya gan keren deh :D
Permalink
wah udah lama nih gan ga mampir :)
blognya makin keren aja..

css diatas buatan agan sendiri ? keren banget :)
Permalink
Hehe Thanks Mas :-d :D
Permalink
Hehe Thanks Sob,Iya Hehe :)
Permalink
Thanks Sob :)
Permalink
Mungkin Kali Ini Enggak Pertamanya Deh Gan Wkwkwk :p :D
Permalink
Hehe Thanks Mas,Iya Sob Kreasi Saya Sendiri :D
Permalink
yang saya heran kenapa halaman disclaimern difrom komentarya tab kecil ya yang muncul bukannya halaman baru atau apa gitu.. :D @@,
Permalink
hebat bgt :)
Permalink
Baru tau saya mas, makasih udh dishare :)
Permalink
mantap kali tutor ni :D
Anonim Permalink
Komentar ini telah dihapus oleh administrator blog.
Anonim Permalink
wah mantap bener sob.

visit back yah
Permalink
@Mas Imron Hehe Saya Sengaja Membuatnya Pop-up sob hehe,@Mas Nandar Thanks Sob :D
Permalink
Hehe Sama-sama Gan :-d
Permalink
hehe thanks mas :D
Permalink
Hehe oke sob :D
Permalink
mantab sob!
- salam blogger dari sulawesi! -
--> contact saya dong starcross1st@gmail.com / konfir ane di fb agan!
Permalink
hehe thanks gan :-d,Sip :D

Catatan
Dilarang menambahkan link aktif ataupun meng-iklankan suatu produk dll.
Kode yang panjang bisa menggunakan tag <i rel="pre"> KODE PANJANG ANDA </i>
Untuk menyisipkan gambar, gunakan tag <i rel="image"> URL GAMBAR </i>
Untuk menyisipkan Judul, gunakan tag <b rel="h3"> JUDUL ANDA DI SINI... </b>
Untuk menciptakan efek tebal gunakan tag <b> TEKS ANDA DI SINI... </b>
Untuk menciptakan efek huruf miring gunakan tag <i> TEKS ANDA DI SINI... </i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang kita bahas saat ini akan sangat bermanfaat bagi pembaca lain.
:):(^_^:D;):-bd:'(:\:pB):Q:Ozz7:(\o/**p<30:):-a7:O*fck*x@X@~x(:yaya::p*Klik Untuk Melihat Kode Emoticon!

Konversi Kode Special Character Comment Editor Virtual Pedoman Berkomentar Daftar Member Aktif

BATAL

gobottom