Efek Gambar Dengan Panel Description Menggunakan CSS3 Transitions

Efek Gambar Dengan Panel Description Menggunakan CSS3 Transitions – Efek gambar menggunakan CSS3 transitions ini adalah menunjukkan bagaimana untuk menambahkan panel deskripsi animasi gambar yang dapat bergesar secara otomatis dapat terbuka ketika mouse diarahkan ke gambar. Dengan menambahkan deskripsi singkat atau bisa juga dengan memasukan link didalamnya maka panel deskripsi gambar ini dapat memberikan efek zoom sekaligus hover deskripsi yang muncul secara halus bergeser secara otomatis.

Panel deskripsi dapat dengan mudah diarahkan saat bergesar sesuai dengan keinginan atau yang sesuai tata letak gambar. Terdapat empat arah pilihan untuk membuat panel deskripsi gambar tersebut bergeser, antara lain gambar dapat bergeser ke arah atas, bawah, kanan, dan kiri. Permulaan saat hover animasi deskripsi gambar saat bergeser tertunda 0,5 detik setiap kali menggunakan properti transisi-delay, sehingga efek ini terjadi setelah dari gambar memunculkan efek bayangan menggunakan CSS3 yang ditambahkan ke gambar untuk menciptakan efek gambar yang mengangkat atau sedikit memunculkan efek zoom. Hasilnya yang akan terjadi adalah gambar keren dengan panel deskripsi bergeser yang menggunakan tidak lebih dari HTML / CSS untuk membuat efek. Untuk pemasangannya kedalam blog maka berikut adalah penyajiannya tentang cara membuat Efek Gambar Dengan Panel Description Menggunakan CSS3 Transitions:

1. Login ke akun blogger.
2. Klik Template > Edit HTML > Lanjutkan > Centang Expands Widget Template.
3. Cari kode ]]></b:skin> gunakan CTRL+F untuk mempermudah pencarian.
4. Taruh kode berikut ini tepat diatas kode ]]></b:skin>

/* Sliding Description Panel For Images */

.imagepluscontainer {
 /* main image container */
    position: relative;
    z-index: 1;
    font-family: verdana;
    font-size: 13px;
}

.imagepluscontainer img {
 /* CSS for image within container */
    position: relative;
    z-index: 2;
    -moz-transition: all 0.5s ease;
 /* Enable CSS3 transition on all props */
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.imagepluscontainer:hover img {
 /* CSS for image when mouse hovers over main container */
    -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    -moz-transform: scale(1.05, 1.05);
    -webkit-transform: scale(1.05, 1.05);
    -ms-transform: scale(1.05, 1.05);
    -o-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
}

.imagepluscontainer div.desc {
 /* CSS for desc div of each image. */
    position: absolute;
    width: 90%;
    z-index: 1;
 /* Set z-index to that less than image's, so it's hidden beneath it */
    bottom: 0;
 /* Default position of desc div is bottom of container, setting it up to slide down */
    left: 5px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.8);
 /* black bg with 80% opacity */
    color: white;
    -moz-border-radius: 0 0 8px 8px;
 /* CSS3 rounded borders */
    -webkit-border-radius: 0 0 8px 8px;
    border-radius: 0 0 8px 8px;
    opacity: 0;
 /* Set initial opacity to 0 */
    -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
 /* CSS3 shadows */
    -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
    -moz-transition: all 0.5s ease 0.5s;
 /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */
    -webkit-transition: all 0.5s ease 0.5s;
    -o-transition: all 0.5s ease 0.5s;
    -ms-transition: all 0.5s ease 0.5s;
    transition: all 0.5s ease 0.5s;
}

.imagepluscontainer div.desc a {
    color: white;
}

.imagepluscontainer:hover div.desc {
 /* CSS for desc div when mouse hovers over main container */
    -moz-transform: translate(0, 100%);
    -webkit-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    -o-transform: translate(0, 100%);
    transform: translate(0, 100%);
    opacity: 1;
 /* Reveal desc DIV fully */
}

/* Below CSS when applied to desc DIV slides the desc div from the right edge of the image */

.imagepluscontainer div.rightslide {
    width: 150px;
 /* reset from default */
    top: 15px;
    right: 0;
    left: auto;
  /* reset from default */
    bottom: auto;
  /* reset from default */
    padding-left: 15px;
    -moz-border-radius: 0 8px 8px 0;
    -webkit-border-radius: 0 8px 8px 0;
    border-radius: 0 8px 8px 0;
}

.imagepluscontainer:hover div.rightslide {
    -moz-transform: translate(100%, 0);
    -webkit-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    -o-transform: translate(100%, 0);
    transform: translate(100%, 0);
}

/* Below CSS when applied to desc DIV slides the desc div from the left edge of the image */

.imagepluscontainer div.leftslide {
    width: 150px;
  /* reset from default */
    top: 15px;
    left: 0;
    bottom: auto;
  /* reset from default */
    padding-left: 15px;
    -moz-border-radius: 8px 0 0 8px;
    -webkit-border-radius: 8px 0 0 8px;
    border-radius: 8px 0 0 8px;
}

.imagepluscontainer:hover div.leftslide {
    -moz-transform: translate(-100%, 0);
    -webkit-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    -o-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
}

/* Below CSS when applied to desc DIV slides the desc div from the top edge of the image */

.imagepluscontainer div.upslide {
    top: 0;
    bottom: auto;
  /* reset from default */
    padding-bottom: 10px;
    -moz-border-radius: 8px 8px 0 0;
    -webkit-border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;
}

.imagepluscontainer:hover div.upslide {
    -moz-transform: translate(0, -100%);
    -webkit-transform: translate(0, -100%);
    -ms-transform: translate(0, -100%);
    -o-transform: translate(0, -100%);
    transform: translate(0, -100%);
}
/* Sliding Description Panel For Images */

5. Untuk memanggil kode diatas muncul di posting blog, silahkan Buat Entri Baru menggunakan mode HTML kemudian masukan kode diberikut ini kedalam halaman posting atau bisa juga di sidebar blog.

<div class="imagepluscontainer" style="width:263px;">
<img src="URL GAMBAR">
<div class="desc downslide">
DESKRIPSI GAMBAR
</div>
</div>

Keterangan:

• Kode berwarna biru adalah URL Gambar, silahkan ganti sesuai keinginan.
• Kode berwarna merah adalah arah panel deskripsi bergeser, silahkan sesuaikan dengan menggantinya menjadi: rightslide, leftslide, atau upslide.
• Kode berwarna ungu adalah teks deskripsi gambar, silahkan ganti sesuai keinginan.

Sebagai contoh seperti dibawah ini:

<div class="imagepluscontainer" style="width:263px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7Wz5Dd-tjQ9Rk9ZmnRhf8Wmb5mUP-OwypmH3fL-6Ntxu-3jcMc65bPahqO9TYbu6di5eJaT0GVF2K9nd6ljPUQLQUdjybXGZtd1fN0bbcQoVKdKXLqoMl8hUSHPM-0cOhsa6CtEB3Y2bC/s1600/elisha_cuthbert_face_wallpaper-2013-02.jpg">
<div class="desc downslide">
<a href=”http://mas-andes.blogspot.com/2013/03/jquery-widget-recent-post-automatic.html” target=”_blank”><b>Jquery Widget Recent Post Automatic Slider</b></a> – ini adalah widget yang berguna untuk menampilkan artikel terbaru menggunakan mode slide show
</div>
</div>

Dari kode tersebut maka hasilnya akan tampak sama persis seperti pada gambar dibagian atas atau yang ada di halaman demo.