بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
Image Roll on Hover pada sebuah gambar ketika tersorot mouse akan berganti dengan gambar lain. Pergantian animasi ini menggunakan trik Opacity dan Transition. Dua property utama CSS berperan penting disini.
Ketika kita mengupload sebuah gambar untuk ditampilkan di postingan, biasanya hanya tampil satu gambar saja. Dan itu juga masih standar sebuah gambar yang kita buat. Sekarang dengan trik ini, gambar akan berganti dengan mode transisi.
Baca Juga : Kehebatan Teknik Mata Ikan Menyembul dengan CSS3
Opacity pada gambar pertama akan membuat gambar menjadi kabur atau tidak jelas sama sekali dan tergantikan dengan gambar kedua yang sudah kita pasang di bawahnya. Sehingga gambar kedua akan tampil pertama dan gambar pertama akan blur atau kabur (tidak terlihat sama sekali, red)
Memang sebuah trik yang bagus menurut saya, karena kita seolah-olah membuat efek animasi atau semacam gif seperti itu, tapi dengan sebuah kode bukan dengan permainan software pembuat gambar bergerak atau gif maker.
Baca Juga : Menu Button Animasi dengan Trik Kode CSS3
Gambar yang nanti akan ditampilkan diperkirakan ukuran lebar dan tinggi sehingga tidak terpotong di postingan. Saran pertama yang harus kalian pelajari. Sehingga gambar akan tampil sesuai dengan halaman postingan.
Hal ini kalian bisa lihat di template pada element : .main-wrapper {}. Ingat untuk mencari kode itu dan tentukan dulu lebarnya atau width bidangnya. Semisal lebar bidang 400px, maka usahakan gambar tidak lebih besar dari itu.
Okelah kita mulai pelan-pelan saja ya.
Trik CSS3 Image Roll on Hover Menakjubkan
Masuk ke template. Ini hal utama dan keharusan dari seorang blogger. Utak-atik template adalah hal mendasar dan harus kalian kuasai karena dari sinilah tampilan blog bisa kita rombak sesuai keinginan kita. Oke. Setelah itu pilih Tema dan kemudian klik Sesuaikan : Edit HTML. Temukan kode ]]></b:skin>. Lalu tempelkan kode dibawah ini diatas kode ]]></b:skin> tersebut.
<style type="text/css">
.alifacodejump{
float:center;
margin:2px 2px 2px 2px;
overflow:hidden
}
.alifa{
width:330px;
height:155px;
}
#code{
position:fixed;
}
#code 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 15px #FF1493;
-webkit-box-shadow: 0px 0px 15px #FF1493;
box-shadow: 0px 0px 15px #FF1493;
}
#code .alifa{
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 15px #FF1493;
-webkit-box-shadow: 0px 0px 15px #FF1493;
box-shadow: 0px 0px 15px #FF1493;
}
#code .alifa: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 15px #CD5C5C;
-webkit-box-shadow: 0px 0px 15px #CD5C5C;
box-shadow: 0px 0px 15px #CD5C5C;
}
</style>Nah sudah sampai pada tahapan pertama. Sekarang berlanjut lagi untuk menempelkan kode dibawah ini di postingan yang akan kamu tampilkan gambar on hover tadi.
<div class="alifacodejump" id="code">
<img src="URL gambar kamu pertama" width="100" height="50"/>
<div class="alifa">
<img src="URL gambar kamu kedua" width="100" height="50"/></div>
</div>Catatan :
URL gambar pertama dan kedua diisi dengan gambar kamu
Width adalah lebar gambar, jangan melebihi lebar postingan
Height diisi dengan tinggi gambar kamu.
#CD5C5C adalah warna shadow atau bayangan. Ganti sesukamu dengan Kode Warna.
Setelah dilakukan tinggal berdoa dan trara jadilah trik ini tampil di postingan halaman blog kamu. Oke khan. Prakteknya diteliti baik-baik ya, supaya tidak keliru. Karena nanti tampilan tidak sesuai yang kamu kehendaki bila salah dalam penulisan dan penempatan kodenya. Terima kasih yang sudah mampir disini di artikel Trik CSS3 Image Roll on Hover Menakjubkan. Salam dan sampai jumpa esok lagi. Silakan dilanjutkan ngeblognya.
Label Postingan :
CSS
Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Trik CSS3 Image Roll on Hover Menakjubkan . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.
