在網頁設計中，圖片不僅是增色添彩的元素，也是提高用戶體驗的重要因素之一。而在CSS中，圖片大小調整也是一項必要操作。那么今天我們就來學習一下如何實現圖片由無變大的效果。

<style>
.img_box {
position: relative;
width: 200px;
height: 200px;
}
.img_box img {
position: absolute;
top: 0;
left: 0;
max-width: 200px;
max-height: 200px;
opacity: 0.2;
transition: all 0.5s;
}
.img_box:hover img {
max-width: 400px;
max-height: 400px;
opacity: 1;
}
</style>
<div class="img_box">
<img src="example.jpg" alt="example">
</div>

以上代碼中，我們首先將圖片框設置為相對定位，并設置了圖片的最大寬度和高度為200px，并且設置了圖片的透明度為0.2，以及設置了圖片的過渡動效為0.5s。

當我們將鼠標移到圖片框上時，通過:hover偽類，可以看到圖片大小變成了400px，并且透明度變成了1。

這樣，我們就完成了一個簡單的圖片由無變大的效果。同時，我們也可以根據需要調整代碼中的參數來實現不同的效果。希望對大家提供一些幫助。