Membuat Efek Berbeda Dalam 1 Tampilan Gambar

Berikut ini akan diuraikan langkah-langkah cara membuat ( Efek Berbeda Dalam 1 Tampilan Gambar ) semoga artikel kali ini bermanfaat untuk kita semua.
Adapun Cara membuat : ( Efek Berbeda Dalam 1 Tampilan Gambar ) sebagai berikut :

DAFTAR ISI CODE [Tampilkan][Sembunyikan]

CSS Kode

<style type="text/css">
/* Scale And Rotate Effect In Hover Image
Data: Pure CSS input
Visit: http://sbtm77.blogspot.com/
Released Publish on Juni 15, 2001
Design Author: SBTM77 */
.scaleRot {
position:relative;display:inline-block;overflow:hidden;width:300px;height:200px;
margin:10px;cursor:pointer;border:4px solid #fff;box-shadow:0 0 3px #777}

.scaleRot span {
background:rgba(0,0,0,.42);position: absolute;color:yellow;
font:bold italic 10px Verdana,sans-serif;padding:180px 0 0 10px;z-index: 1;
width:300px;height:200px;display: block;top: 0;transition: all 1.5s ease-in-out;
-webkit-transition: all 1.5s ease-in-out;-moz-transition: all 1.5s ease-in-out}

.scaleRot img {
width:100%;height:100%;-webkit-transition: all 1.5s ease-in-out;
-moz-transition: all 1.5s ease-in-out;transition: all 1.5s ease-in-out}

.scaleRot:hover img {
-moz-transform: scale(1.2) rotate(10deg);
-webkit-transform: scale(1.2) rotate(10deg);
transform: scale(1.2) rotate(10deg)}

.scaleRot:hover span {
opacity:0;transition: .01s linear;-moz-transition: .01s linear;
-webkit-transition: .01s linear;-webkit-transition: .01s ease-out;
-moz-transition: .01s ease-out;transition: .01s ease-out}
</style>

HTML Kode

<div class="scaleRot">
<img alt="SBTM77 Design" src="http://URL-Gambar.jpg" />
<span>SBTM77 Design</span>
</div>

Setelah semua kode html, (style, atau b:skin, dan javascript sudah di pasang sesuai posisinya masing-masing langkah terahir adalah Simpan, atau klik pratinjau tema terlebih dahulu,. Namun untuk saran tiada salahnya langsung klik SIMPAN dan lihat hasilnya, jika terjadi eror, dan kode tidak berfungsi dengan baik silahkan informasikan kami di kolom komentar, salam Team SAHAB BISNIS 77.

Demikian Cara membuat ( Efek Berbeda Dalam 1 Tampilan Gambar ) semoga bermanfaat terima kasih.

CONTOHNYA

SBTM77 Design