Membuat Efek Gambar Dengan Panel Description di Blog

Membuat Efek Gambar Dengan Panel Description di Blog - Efek Gambar Dengan Panel Description memberikan efek zoom sekaligus hover deskripsi yang muncul secara halus bergeser secara otomatis. Efek ini akan muncul ketika cursor diarahkan ke gambar maka dapat memberikan efek zoom serta deskripsi yang muncul secara halus dengan efek slider.

Dengan memasang Efek Gambar Panel Description tentunya menambah point pada blog anda karena akan mempercantik tampilan dan style, selain itu juga Efek Gambar Panel Description disertakan link utuk menuju halaman. Sebagai contoh berikut anda bisa melihat tampilan Efek Gambar Dengan Panel Description pada gambar digagian bawah postingan. Bagi anda yang tertarik berikut ini tahapan-tahapan dalam memasangnya :

Membuat Efek Gambar Dengan Panel Description di Blog  

1. Login keakun Blogger anda
2. Pilih Template => Klik Edit HTML
3. Dengan menggunakan ctrl+f anda cari kode  ]]></b:skin>
4. kemudian anda copy kode CSS dibawah ini dan pastekan diatasnya

/* 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(3, 26, 118, 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. Simpan Template
6. Selanjutnya untuk menampilakan gambar anda buat New page/Laman Baru =>  pilih mode HTML => kemudian anda masukkan kode dibawah ini kedalm content yang tersedia

<div class="imagepluscontainer" style="width: 270px;">
<img src="URL Gambar"/>
<div class="desc rightslide">
Deskripsi Gambar
</div>
</div>

Jika anda ingin Membuat Efek Gambar Dengan Panel Description disertakan link anda bisa menggunakan kode dibawah ini

<div class="imagepluscontainer" style="width: 270px;">
<a href="URL Tujuan"><img src="URL Gambar" /></a>
<div class="desc rightslide">
Deskripsi Gambar
</div>
</div>

Keterangan: 
 » Kode URL Gambar dan URL Tujuan silahkan ganti sesuai keinginan.
 » Kode desc downslide adalah arah panel deskripsi bergeser, silahkan sesuaikan dengan menggantinya menjadi: downslide, rightslide, leftslide, atau upslide.
» Kode "deskripsi gambar" silahkan ganti sesuai keinginan.

7 . Publikasikan.

Live Demo 

America's Army is a shooter game that emphasizes teamwork . So it is advisable to play together . Players will be divided into two teams are pitted against each other .

Demikian Membuat Efek Gambar Dengan Panel Description di Blog, semoga bermanfaat untuk anda.

Bagikan Artikel ini