Rieens' blog

Browse » home» css3 » dengan » efek » hover » image » Image Hover Efek dengan CSS3

---

Image Hover Efek dengan CSS3

Sexy Image Hover Efek dengan CSS3, sebuah hover efek pada gambar yang menarik menggunakan CSS3, jadi gambar ini akan menampakkan tingkah laku yang sangat bagus tanpa menggunakan Javascript jadi tidak terlalu menambah berat beban loading blog kamu.

Supaya tidak terlalu penasaran silahkan lihat demonya : Demo Image Hover CSS3



Ini kode untuk membuat efek image hover tersebut.

#Ini untuk CSSnya :

/* IMAGE HOVER EFEK */

.gambar{

-webkit-transform:scale(0.6);

-moz-transform:scale(0.6);

-o-transform:scale(0.6);

float:left;

margin-left:-50px;

margin-right:-50px;

margin-top:-10px;

-webkit-transition-duration: 0.5s;

-moz-transition-duration: 0.5s;

-o-transition-duration: 0.5s;

}

.gambar img{

padding:10px;

border:1px solid #fff;

}

.gambar:hover{

-webkit-transform:scale(0.8);

-webkit-box-shadow:0px 0px 30px #ccc;

-moz-transform:scale(0.8);

-moz-box-shadow:0px 0px 30px #ccc;

-o-transform:scale(0.8);

-o-box-shadow:0px 0px 30px #ccc;

}

.gambar .mask{

width: 100%;

background-color: rgb(0, 0, 0);

position: absolute;

height: 100%;

opacity:0.6;

cursor:pointer;

-webkit-transition-duration: 0.5s;

-moz-transition-duration: 0.5s;

-o-transition-duration:0.5s;

}

#img-1:hover .mask{

height:0%;

}

#img-2:hover .mask{

height:0%;

margin-top:130px;

}

#img-4:hover .mask{

margin-left:219px;

margin-top:135px;

height:0%;

width:0%;

}

#img-3 #mask-1 {

width:50%;

}

#img-3 #mask-2{

width:50%;

margin-left:211px;

}

#img-3:hover #mask-1{

width:0%;

}

#img-3:hover #mask-2{

margin-left:430px;

width:0%;

}

#img-5:hover .mask{

margin-left:219px;

margin-top:135px;

height:0%;

width:0%;

-webkit-transform: rotateX(360deg);

-moz-transform: rotate(360deg);

-o-transform: rotate(-360deg);

}

#img-6:hover .mask{

margin-left:219px;

margin-top:135px;

height:0%;

width:0%;

-webkit-transform: rotateZ(750deg);

-moz-transform: rotateZ(750deg);

-o-transform: rotat(750deg);

}

#Ini untuk kode HTMLnya :

<div class=gambar id=img-1>

<div class=mask>

</div>

<img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlIaS3TDIEzr6EMZycCWa5hnB-V0PPsVahbi8AysYqHV7URC5KG2BdlaC0oRVVpBqhvqyuTDuf-a6SW6LhhfhWYs3khpMcxdeUuOp-0eYLLGQOStZAm9pEo_nASdfmM5hzIKqzqOVXN-7N/s1600/01.jpg />

</div>

<div class=gambar id=img-2>

<div class=mask>

</div>

<img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-WYukLb8NcFjwNAJmEFQUj-sts53xbIFb_cIRTkyV_8SzoF2YC3iU5jS2aSzbrHZQDGPT_nbvIeCK175ln0D9KKRq6Tk8LCemu3ii03hRplthDx46H_-u9mfffIUpKof3pMURTcWcmxbZ/s1600/07.jpg />

</div>

<div class=gambar id=img-3>

<div class=mask id=mask-1>

</div>

<div class=mask id=mask-2>

</div>

<img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSPcqsT9XIUM9zr-6Ed_-LvdU_X5oWVyqCuL34QJYY6LmYKy8z3c8on7sfPPP8rT4ST7re7t4ytg_TZWYoQ7terkJb_ujjA6oAB6RNLtHXQfdWyPPajJh9Tt03wVGvLZB7jofmiDnJKyfG/s1600/05.jpg />

</div>

<div class=gambar id=img-4>

<div class=mask>

</div>

<img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyK6Ls3yICUC2_EWksVbcUMmA21mpe81419ohwuJavOVa5geYv7yIjMSdfTuRVmB5GQq-peDcKOcngxZnf-zDpqR87z8ZA1RgRQD_Xcjfwf5FFbCd5NWKQxBeGG5Vu9YoDk5U3lbjXuOw9/s1600/04.jpg />

</div>

<div class=gambar id=img-5>

<div class=mask>

</div>

<img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFfx6RpRoqjDGe7yPaEuBwglNOFLy-P-T1bZbvbJwPHHAD-YjeRlwKIDP7uaUE_vlpjuYn__DyGMw9Wx5rj_MVS3RrHWfVBK2OR-TkPXW2pjXOKlCaLOPkwyilgTB3Oo3auLin-K2ANEoQ/s1600/06.jpg />

</div>

<div class=gambar id=img-6>

<div class=mask>

</div>

<img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQvjMk4HeAd92o_nUaj3qbIpRnWI1bBbPC9pooJIzLI3cAeVIGsdT8Xp-Ei2LfLZc-cYtOe1qQxVWq9xTjzKXWErD-rT69g7kMvo7W2oRtMd0X5emqfH8R7RR5E2BVT5qgLVtQYN-JfsPr/s1600/08.jpg />

</div>

Lalu bagaimana menerapkannya di blogger ?

Masuk ke >> Dasboard >> Template >> Edit HTML

1. Copy kode CSS (kode yang pertama) dan letakkan tepat diatas ]]>< /b:skin>

2. Lalu Copy kode HTML (kode yang kedua) dan tempatkan dimana gambar akan ditampilkan? Dipostingan bisa atau di sidebar juga bisa.

3. Jangan lupa untuk mengganti teks warna merah yaitu URL gambar yang akan ditampilkan

4. Kalau tampilan belum sesuai dengan layout sampean silahkan otak-atik sendiri sambil bereksperimen, jangan manja ya supaya Mandiri....hehehe



Bagaimana bingung ya? mudah mudahan bisa dicerna, maaf karena belum cukup punya banyak waktu untuk membuat artikel lebih terperinci.



Credit : http://www.nikesh.me/