CSS3提供了豐富的過渡效果和動畫效果，其中之一就是圖片的fade in效果，讓圖片顯得更加生動和流暢。

要實現圖片的fade in效果，我們需要使用CSS3中的transition或者animation屬性，并且需要將圖片設置為透明，然后在鼠標懸浮或者其他觸發事件的情況下改變透明度來實現效果。

<style>
.img-fade-in {
opacity: 0;
transition: opacity .5s ease-in-out;
}
.img-fade-in:hover {
opacity: 1;
}
</style>
<img src="your-image-url" class="img-fade-in">

以上代碼將設置一個初始透明度為0的class為img-fade-in的圖片，并且在鼠標懸浮時將透明度改變為1，效果就是圖片慢慢顯示出來，而不是突然出現。

我們也可以使用animation屬性來實現相同的效果，只需要稍微改變一下CSS代碼即可。

<style>
.img-fade-in {
opacity: 0;
animation: fadeIn .5s ease-in-out;
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
</style>
<img src="your-image-url" class="img-fade-in">

以上代碼將設置一個初始透明度為0的class為img-fade-in的圖片，并且通過animation屬性來控制透明度的變化，使用keyframes來設置透明度從0到1的變化，效果和使用transition屬性的代碼一樣。

總的來說，圖片的fade in效果是CSS3中非常實用和常見的功能，可以讓我們的網頁更加動態和生動。