Cara membuat Efek Gambar Berputar dan Description Gambar Sembunyi

 "Demo"

Cara membuat Efek Gambar Berputar dan Description Gambar Sembunyi. 
Pengen Buat??. Tenang saja ntar aku beri tutorialnya. tapi kenalin dulu apa aja efek dari Cara membuat Efek Gambar Berputar dan Description Gambar Sembunyi.:

1. Gambar akan berputar 100 Drajat tapi berputarnya secara halus.
2. Description akan keluar dan mengikuti gambar yang berputar setelah maouse di arahkan ke gambar
3. Ketika mouse di arahkan ke gambar akan ada efek Zoom

Ok udah selesai sedikit penjelasannya. langsung saja ikutin langkah demi langkah

1. Buka dulu Blogger sobat..
2. Masuk ke Menu Template > HTML
3. Cari Kode ini ]]></b:skin> atau </style>
4. Kopy dan paste kode di bawah ini tepat di atas ]]></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: 10px 25px 10px 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%);
}
.imagepluscontainer { -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; -ms-transition:all 0.5s ease; transition:all 5s ease; }
.imagepluscontainer:hover { -webkit-transform:rotate(-10deg); -moz-transform:rotate(-10deg); -o-transform:rotate(-10deg); -ms-transform:rotate(-10deg); transform:rotate(-360deg); }
/* Sliding Description Panel For Images */

5. Untuk menggunankannya di postingan Blog cukup kopy kode di bawah ini., dan paste dengan mode HTML.

<div class="imagepluscontainer" style="width:263px;">
<img src="https://wallpaperscraft.com/image/gaara_sabaku_no_gaara_kazekage_naruto_shippuden_naruto_97135_250x300.jpg">
<div class="desc downslide">
DESKRIPSI GAMBAR DI BAWAH
</div>
</div>

*Penting : 
Warna Merah Ganti dengan Url gambar Sobat
Warna Biru adalah arah panel description bergerak. 
upslide (untuk di atas) rightslide (untuk di kanan) leftslide (Untuk di kiri) downslide (untuk di bawah)
Warna Hijau adalah Untuk Description 

OK udah selesai penjelasanya untuk Tutorial "Cara membuat Efek Gambar Berputar dan Description Gambar Sembunyi" 
apabila ada pertanyaan langsung saja di komentar...

Share: