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. 

Share :