Panel Split Teks Pada Gambar

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:

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>