Cara membuat efek Fade-in dan Fade-out dengan CSS mudah 100% work

Assalamu'alaikum Wr.Wb.

Kali ini Teknologi Informatika akan membahas tentang cara menambahkan efek Fade-in dan Fade-out pada HTML menggunakan CSS. Mungkin Agan sudah pada tau fungsi elemen Fade-in dan Fade-out ini, Saya hanya sekedar sharing aja terutama mengenai Efek yang dihasilkan terhadap suatu objek misal-nya Photo/Image karena kedua elemen tersebut menghasilkan Efek yang berkebalikan.

Efek Fade-In CSS

Pada HTML tambahkan

<div class="fade-in">...</div>  untuk efek fade in, dan

tambahkan <div class="fade-out">...</div>  untuk efek fade-out...

Lalu pada CSS tambahkan script berikut:

.fade-in {
-webkit-transition:opacity 1s ease-out;
-moz-transition:opacity 1s ease-out;
-ms-transition:opacity 1s ease-out;
-o-transition:opacity 1s ease-out;
transition:opacity 1s ease-out;
opacity:0.2;
}

.fade-in:hover {
opacity:1;
}

Efek Fade-Out CSS

.fade-out {
-webkit-transition:opacity 1s ease-out;
-moz-transition:opacity 1s ease-out;
-ms-transition:opacity 1s ease-out;
-o-transition:opacity 1s ease-out;
transition:opacity 1s ease-out;
}

.fade-out:hover {
opacity:0.2;
}