Cara Membuat Efek Gambar Dengan Panel Description di Blog. Ok sobat berikut ini Tutorial Bangsat akan membagikan tutorial yang mungkin sudah tidak asing lagi untuk sobat yaitu tentang cara membuat efek gambar dengan panel description. Gambar ini dapat memberikan efek zoom sekaligus hover deskripsi yang muncul secara halus bergeser secara otomatis.
Ketika mouse diarahkan ke gambar maka dapat memberikan efek zoom serta deskripsi yang muncul secara halus dengan efek slider.
Ok Sobat berikut ini adalah cara memasang efek gambar dengan panel description di blog:
Cara memasang efek gambar
1. Klik Template kemudian pilih Edit HTML
3. Cari kode ]]></b:skin> atau </style>
4. Tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>
/* 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 menggunakannya di postingan blog, adalah menggunakan mode HTML ketika membuat postingan dan kemudian masukan kode dibawah ini kedalam halaman posting.
<div class="imagepluscontainer" style="width:263px;">Keterangan:
<img src="URL GAMBAR">
<div class="desc downslide">
DESKRIPSI GAMBAR
</div>
</div>
Kode URL Gambar, silahkan ganti sesuai keinginan sobat.
Kode berwarna biru adalah arah panel deskripsi bergeser, silahkan sesuaikan dengan menggantinya menjadi: rightslide, leftslide, atau upslide , downslide terserah sobat suka nya yang mana.
Kode "deskripsi gambar" silahkan ganti sesuai keinginan.
Ok sobat Sekian tutorial yang dapat dibagikan seocips kali ini dan jangan lupa untuk selalu melihat artikel terbaru Tutorial Bangsat. Semoga Cara Membuat Efek Gambar Dengan Panel Description di Blog ini bermanfaat.
Terima Kasih telah membaca artikel tentang Cara Membuat Efek Gambar Dengan Panel Description di Blog . Silahkan baca artikel lainnya di daftar isi.
Judul :
Cara Membuat Efek Gambar Dengan Panel Description di Blog
.
Ditulis oleh :
Unknown
.
Pada hari :
Saturday 2 August 2014
.
Rating Blog :
5
dari 5
Syarat berkomentar :
1. Tidak boleh mencantumkan link aktif ( auto delete )
2. Tidak boleh mengandung SARA, pornografi,dsb.
3. Budayakan berkomentar dengan sopan dan menghargai pendapat orang lain.
ConversionConversion EmoticonEmoticon