在网页设计中，图片不仅是增色添彩的元素，也是提高用户体验的重要因素之一。而在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。

这样，我们就完成了一个简单的图片由无变大的效果。同时，我们也可以根据需要调整代码中的参数来实现不同的效果。希望对大家提供一些帮助。