28.12.14
47
Panel Split Teks Pada Gambar - Meletakkan teks deskripsi sebagai keterangan gambar yang berada dibalik gambar tersebut, sedangkan membuka atau melihat teks tersebut dengan efek split panel. Kerja efek ini sama seperti Membuat Panel Slide Untuk Menyimpan Text, hanya desain gaya membuka untuk menampilkan teks yang tersembunyi didalamnya yang berbeda. Kesempatan kali ini SAHABAT BLOGGER 77 kembali memberikan nuansa efek terbaru pada tampilan gambar posting Anda dengan style Panel Split Teks Pada Gambar seperti ini:


Split panel picture



Sitemap For You - 2 Desain Daftar Isi Untuk Blog Bernuansa Hitam




<style type="text/css">
.split-top,
.split-bottom {position:absolute;width:300px;height:150px;}
.split-top {top: 0;}
.split:hover .split-top{top:-50px;}
.split:hover .split-bottom{top:200px;}
.split-bottom {top:150px;background-position:0 -150px}
.split {width: 300px;height: 300px; float:left;position: relative}

.split-top, .split-bottom{
  -webkit-transition: top 0.3s ease;
  -moz-transition: top 0.3s ease;
  -o-transition: top 0.3s ease;
  -ms-transition: top 0.3s ease;
  transition: top 0.3s ease;}

.split p {
  font:bold 45px/300px Helvetica, Arial, sans-serif;
  text-align: center;opacity: 0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);

  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;}

.split:hover p {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;cursor: pointer;}

.split1 {background:#DC143C;color:#fff;text-shadow:2px 2px 4px #111}
.split1 .split-top, .split1 .split-bottom {
  background-image: url(http://URL-Gambar Anda.jpg);
  background-repeat: no-repeat}
</style>


Split effect merupakan gaya untuk membuka sebuah gambar sebagai objek dengan sistem membelah gambar tersebut menjadi 2 bagian dengan position center area untuk menampilkan teks yang sudah kita tuliskan disana sebagai keterangan gambar. Banyak ragam efek gambar yang sudah pernah saya desain untuk menampilkan tulisan singkat tentang deskripsi gambar tersebut seperti desain-desain efek gambar sebelumnya tentang Membuat Teks Descripsi Pada Gambar Hover. Disana saya sudah memberikan 9 tampilan efek yang berbeda, untuk melengkapi koleksi efek gambar tersebut, Split Panel Effect berikut adalah efek ke- 10 sebagai pilhan buat sahabat semua dengan tampilan efek seperti ini:




DEMO SHOW




Tahap akhir, Anda tinggal mengatur teks apa yang akan Anda tuliskan untuk memberi nama pada gambar Anda pada pengaturan HTML seperti ini:


<div class="split split1">
    <p>SB~77 Design</p> //ganti dengan teks Anda...
       <div class="split-top"></div>
       <div class="split-bottom"></div>
</div>

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Panel Split Teks Pada Gambar
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

47 komentar

  1. wah keren banget memang tutor,,mgkn sangat cocok di terapkan pada template blog agar lebih menarik dan elegan tampilanny, terimaksih tutorialnya mbak

    BalasHapus
    Balasan
    1. terimakasihnya sudah diterima mas, dan akan saya kembalikan dengan ucapan terimakasih kembali sudah berkunjung.

      Hapus
    2. saya juga mau kembali ah

      Hapus
  2. nahh ini inihh yang saya cari :) terimakasih sudah berbagi ilmu , kebetulan saya baru tau :) sukses selalu ya buat blog nya :)

    BalasHapus
    Balasan
    1. ini juga baru saya temukan mbak, makanya saya share, kali aja ada yang merasa kehilangan.hehe..!!

      Hapus
    2. owh ternyata sama mbak cantik toch....
      makasih mbak dah ditemuin (c)

      Hapus
    3. sini saya simpen saja
      entar ilang lagi

      Hapus
    4. mau diambil sendiri atau mau pakai jasa ojek neh nganterin ketempat kang jum.
      tetapi wani pirooo? dulu

      Hapus
    5. buat mbak devy mah berapa ajha juga boleh (c)

      Hapus
  3. Eh ... tu photony devy kepotong ....heheh

    BalasHapus
    Balasan
    1. biar jadi kembar mas. hehe

      Hapus
    2. klo kembar trs sy pilih yg mana donk ? :)

      Hapus
    3. devy juga bingung mas, apakah harus merelakan mas fiu dengan saudara kembar saya atau dipertahankan, sedangkan saudara kembar saya juga mengatakan hal seperti ini juga.
      ahaiiiii...dah..!!

      Hapus
    4. Ahrerre.... plihn hrs dittpkn dn gk bleh dua2ny ...heee
      Klo gtu sy plih devy yg ini ja deh .. bkn sdra kmbarny ... :D

      Hapus
  4. keren mbak, semoga ini tidak menambah loading blog karena saya mau coba di blog saya :)

    BalasHapus
  5. keren nih mbak tutorialnya,,bikin blog makin keren,,..
    izin nyoba ya...

    BalasHapus
  6. Untuk sementara masih suka yang simple.
    ntar kalo kepengen, langsung praktek aja. makasih ilmunya ya devy.:)

    BalasHapus
    Balasan
    1. yang ini juga simple kok mas, terus kalau yang gak simple tuh seperti apa ya.?

      Hapus
    2. iya mas, apa yang diberikan mbak devy sudah cukup simple tu :D

      Hapus
  7. Wah bagusnya, mungkin ini cocok untuk blog wallpaper.

    BalasHapus
  8. salute....tampilannya memang muantab. kayaknya bisa dimodif untuk menampilkan teks kali ya dev. terus terang saya tertarik dengan gaya pemunculan teksnya....ok makasih tutorialnya. saya izin mempelajari dulu ya sista?

    BalasHapus
  9. saya cuma bisa terkagum kagum saja :-d

    BalasHapus
    Balasan
    1. yg jelas kang kagum sama sapa coba?
      artikelnya ato adminnya?

      Hapus
    2. kang yanto : kayaknya sich dua-duanya dech (c)

      Hapus
    3. kalau saya sih kagum ama ilmunya mbak devy itu, pasti saya senang sekali kalau bisa seperti beliau

      Hapus
  10. Wah keren ya panel split nya... :) trimakasih , mau saya coba langsung

    BalasHapus
  11. beuh keren mbak, kapan2 bisa dicoba. nice share.. saya tunggu tutorial2 keren yang lain :)

    mampir ya dipostq yang baru :)

    BalasHapus
  12. wah keren juga nih mbak
    pada demonya keliatan wajah mbak devy kepotong tulisan.hehehe
    sakit nggak tuh?

    BalasHapus
    Balasan
    1. makanya jangan terlalu sering di hover attauh mas yan tuh gambar devy, kan terasa sakit bila di hover sampai berkali-kali, hehe

      Hapus
  13. keren mbak Dev, bisa untuk gambar di postingan ya, izin bawa pulang, makasih mbak Devi.

    BalasHapus
  14. setelah lihat demo keren ya,, bisa di terapkan pada halaman homepage nih :D

    BalasHapus
  15. wah keren sekali ya mbak, awalnya saya kira ada kursor yang mengarah, tapi setelah saya arahkan kursor ke gambar, saya sangat terkejut ternyata panel splitnya membelah, luar biasaaaaaa mbak devy ini,.... (h)

    BalasHapus
  16. bisa bikin loading lambat gak nih mbak?

    BalasHapus
    Balasan
    1. sudah saya coba dan loadingnya tidak terlalu lambat mas, coba deh

      Hapus
  17. ya ampun panel Split Texs pada gambarnya indah bangett mbak :)

    BalasHapus
  18. 2 menit dipandang demonya ga ngerti, ternyata eeeh kebelah.. telat hehe

    BalasHapus
    Balasan
    1. apalagi kalau sampai bermenit-menit teh, bisa gak mudeng-mudeng, hehe

      Hapus
    2. Kalau saya ndak begitu mbak fadhilah, awalnya saya kira gambarnya berubah saat kursor di arahkan ke gambar, ehhh ternyata membelah, luar biasa ya :D

      Hapus
  19. hehehe..
    panel split ya?, rumit juga sebutannya
    lebih cocok.. versi sy ya!
    efek di gambarku ada namamu..

    efeknya tdk bisa sy sesuaikan dengan tulisan di postingan,.
    efek bekerja dg baik, tp itu Vy.. tdk tersusun seperti biasanya kalo sy buat tulisan di postingan.. nda mau ke tengah, float sdh diganti center, namun gambar nda bergeming, sy tadi juga coba tarik pake katrol sumur.. eee nda mau ke tengah

    ada solusi nda Vy..?!
    teng-kyu sebelumnya..!,
    nda usah di balas klo sibuk.. ntr sj.. cuma ingin tau sj penyebabnya apa..hehehe

    selamat beraktifitas sj Vy..!

    BalasHapus
    Balasan
    1. split kan jika kita terjemahkan dalam bahasa indonesia berarti membelah atau memisahkan, apa yang rumit dengan nama itu.?

      float:center bukan perintah kode mas, float dan text-align sama untuk mengatur posisi teks, namun float difungsikan jika area dinyatakan dengan position:absolute.

      text-align:center adalah untuk mengatur posisi tengah pada text, namun jika text tersebut dibungakus dengan width dah height, maka text akan berada ditengah dengan line-height

      sebagai contoh:

      div {
      width:300px;
      height:300px;
      //kode center pada teks bisa seperti ini...
      font:normal 14px/300px Arial,sans-serif;

      //atau seperti ini...
      font-size:14px;
      font-family:Arial,sans-serif;
      line-height:300px;

      Hapus
  20. keren banget kalo lihat didemonya mba...bisa displit ditengah gitu ya..
    mahir banget neh kreasinya.... :))

    BalasHapus
  21. cuma mau bilang,,,
    selamat tahun baru mbak devi dan tutorial yang kerennya gk abis2

    BalasHapus
  22. Salam

    SELAMAT TAHUN BARU 2015

    Semoga tahun2 mendatang menjanjikan kemakmuran, keamanana dan kesejahteraan kepada kita semua.... aminnn....

    BalasHapus
  23. Panelnya keren mbak :)

    BalasHapus
  24. Waah, boleh juga neh. Makasih banyak ya, jadi ngerti soal panel split teks pada gambar. Sebab, di blog saya blm pernah nyoba.

    BalasHapus
  25. keren nih triknya cocok buat blogger pemula kaya saya ....

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK