BREAKING NEWS :
Loading...

Tutorial Membuat 2 Images Transisi Dengan CSS 3

Tutorial Membuat 2 Images Transisi Dengan CSS 3


Menggabungkan 2 gambar bersama dengan CSS 3 atau transisi effect hover antara dua gambar. Di bawah ini aku akan memberikan code-nya. Code bisa diletakkan pada tata letak > tambahkan gadget > HTML/Java Script atau bisa juga meletakkan kodenya di dalam template untuk yang bisa mengetahui caranya.

Tutorial Membuat 2 Images Transisi Dengan CSS 3

Codenya seperti di bawah ini:

<style>
#cf {
position:relative;
height:300px;
width:200px;
margin:0 auto;
}
#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
opacity:0;
}
</style>

<div id="cf">
<img class="bottom" src="URL IMAGE" />
<img class="top" src="URL IMAGE" />
</div>

Sebuah manipulasi sederhana dengan menggabungkan dua gambar kesukaan, untuk yang aku warnai merah, Anda bisa mengubah ukurannya sesuai keingingan, dan URL IMAGE nya harusnya menggunakan ukuran yang sama juga. 

Subscribe to receive free email updates: