-->


Image Roll Over dengan Trik CSS3

Jump image with CSS3 .. kurang lebih artinya gambar melompat dengan teknik CSS3. Apa mungkin ya gambar bisa melompat dengan CSS3. Mungkin aja bisa, karena dengan trik CSS3 yang telah disempurnakan oleh para pengembang dan para programmer handal semakin hari semakin solid dalam memberikan konsep bahasa coding dalam membangun interaktifnya sebuah web dan blog. Tapi tentu saja untuk bisa menikmati CSS3 ini kalian paling enggak memiliki browser yang support dan dalam hal ini aku saranin Mozilla Firefox 5.0.1 dan Safari yang terbaru.

Nah sekarang kita mulai aja tentang bagaimana membuat gambar melompat, tapi disini melompat bukan berarti gambarnya melompat ke kanan, kiri, bawah atau atas. Hanya gambar itu berubah wajah dengan gambar laennya. Ya seperti gambar berformat gif. Hanya untuk trik CSS3 ini, kita gak membutuhkan software tapi dengan trik OnMouseHover. Bila mouse kita sorotkan ke gambar, maka gambar itu akan beralih. Untuk lebih jelasnya akan aku kasih tutornya aja berikut ini. Moga aja bisa diterima ::






Caranya langsung aja ya ..
Kalian masuk ke Edit HTML Blogger
Terus cari kode ]]></b:skin>
Templelkan salah satu kode dibawah ini ini diatas kode ]]></b:skin>
<style type="text/css">
.devilcode{
float:center;
margin:0px;
autowidth:0px;
autoheight:0px;
autoborder:none;
overflow:hidden
}
.hell{
width:400px;
height:300px;
background:#000;
color:#fff;
text-align:center
}
#satan{
position:relative;
}
#satan img{
opacity:1
-moz-transition: opacity;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 500ms;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#satan .hell{
position:absolute;
top:0;
left:0;
opacity: 0;
-moz-transition: opacity;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 500ms;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#satan .hell:hover{
opacity: .9;
-moz-transition: opacity;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 500ms;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
</style>
]]></b:skin>

Terus untuk memanggil code bisa ditempelkan HTMLnya di postingan --
Seperti ini ->

<div class="devilcode" id="satan">
<img src="URL gambar kalian" width="400" height="300"/>
<div class="hell">
<img height="300" src="URL gambar kalian" width="400"/></div>
</div>


<style type="text/css">
.devilcodejump{
float:center;
margin:0px;
autowidth:0px;
autoheight:0px;
autoborder:none;
overflow:hidden
}
.dark{
width:400px;
height:300px;
background:#000;
color:#fff;
text-align:center
}
#dog{
position:relative;
}
#dog img{
opacity:1
-moz-transition: opacity;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 500ms;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
-moz-box-shadow: 0px 0px 17px #0cf21c;
-webkit-box-shadow: 0px 0px 17px #0cf21c;
box-shadow: 0px 0px 17px #0cf21c;
}
#dog .dark{
position:absolute;
top:0;
left:0;
opacity: 0;
-moz-transition: opacity;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 500ms;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
-moz-box-shadow: 0px 0px 17px #0cf21c;
-webkit-box-shadow: 0px 0px 17px #0cf21c;
box-shadow: 0px 0px 17px #0cf21c;
}
#dog .dark:hover{
opacity: .9;
-moz-transition: opacity;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 500ms;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
-moz-box-shadow: 0px 0px 17px #0cf21c;
-webkit-box-shadow: 0px 0px 17px #0cf21c;
box-shadow: 0px 0px 17px #0cf21c;
}
</style>
]]></b:skin>

Terus untuk memanggil code bisa ditempelkan HTMLnya di postingan --
Seperti ini ->

<div class="devilcodejump" id="dog">
<img src="URL image kalian" width="400" height="300"/>
<div class="dark">
<img height="300" src="URL image kalian" width="400"/></div>
</div>


<style type="text/css">
.devilzjump{
float:center;
margin:0px;
autowidth:0px;
autoheight:0px;
autoborder:none;
overflow:hidden
}
.darkhell{
width:400px;
height:300px;
background:#000;
color:#fff;
text-align:center
}
#reddog{
position:relative;
}
#reddog img{
opacity:1
-moz-transition: opacity;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 500ms;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
-moz-box-shadow: 0px 0px 17px #0cf21c;
-webkit-box-shadow: 0px 0px 17px #0cf21c;
box-shadow: 0px 0px 17px #0cf21c;
-moz-border-radius-topleft: 50px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:50px;
-webkit-border-top-left-radius:50px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:50px;
border-top-left-radius:50px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:50px;
}
#reddog .darkhell{
position:absolute;
top:0;
left:0;
opacity: 0;
-moz-transition: opacity;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 500ms;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
-moz-box-shadow: 0px 0px 17px #0cf21c;
-webkit-box-shadow: 0px 0px 17px #0cf21c;
box-shadow: 0px 0px 17px #0cf21c;
-moz-border-radius-topleft: 50px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:50px;
-webkit-border-top-left-radius:50px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:50px;
border-top-left-radius:50px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:50px;
}
#reddog .darkhell:hover{
opacity: .9;
-moz-transition: opacity;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 500ms;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
-moz-box-shadow: 0px 0px 17px #0cf21c;
-webkit-box-shadow: 0px 0px 17px #0cf21c;
box-shadow: 0px 0px 17px #0cf21c;
-moz-border-radius-topleft: 50px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:50px;
-webkit-border-top-left-radius:50px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:50px;
border-top-left-radius:50px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:50px;
}
</style>
]]></b:skin>

Terus untuk memanggil code bisa ditempelkan HTMLnya di postingan --
Seperti ini ->

<div class="devilzjump" id="reddog">
<img src="URL image kalian" width="400" height="300"/>
<div class="darkhell">
<img height="300" src="URL image kalian" width="400"/></div>
</div>
Blogger Yang Baek, Meninggalkan Jejak Berupa Komentar

Horeee 1 PertamaX Nongol di sini:

Beny Prasetio hobby ngeTweet [agi ngeComment]

:10
siiipppp.... ajari gan

:10 :11 :12 :13
:14 :15 :16 :17
:18 :19 :20 :21
:22 :23 :24 :25
:26 :27 :28 :29
:30 :31 :32 :33
:34 :35 :36 :37
:38 :39 :40 :41
:42 :43 :44 :45
:46 :47 :48 :49
:50 :51 :52 :53
:54 :55 :56 :57
:58

Jangan lupa ada emo Kaskus diatas CommentBox Ini. Langsung dicoba gan ? Entar ane kasih cendol dah.

Protected by Copyscape Web Plagiarism Software
English French German Spain Italian DutchRussian Portuguese Japanese Korean Arabic Chinese Simplified