如何在不影响文本的情况下对 div 类中的图像进行转换？

Question

当我将鼠标悬停在 div 类上时，我希望将图像不透明度设置为 1，但我不想影响图标或 h3。当我将鼠标悬停在 div/列上时，如何直接选择转换影响的内容。 我只需要一些关于css的帮助，我需要做些什么才能使悬停距离在高度和宽度上更大。

或者更好的是如何让 div 的过渡只影响里面的图像？

我应该先说我是 html 和 css 的新手。我已经尝试过这样做，以便当我将鼠标悬停在图像上时，它的不透明度会变为 1。当我将鼠标悬停在 div/column 上而不更改 div/column 中文本的不透明度时，我希望不透明度更改为 1。

<section class="projects clearfix" id="projs">
            <div class="row">
                <h2>H2 Text</h2>
            </div>

            <ul class="showcase">
                <li>
                    <a href="#">
                        <div class="col span-1-of-4 box">
                            <figure class="photo">
                                <i class="ion-ios-checkmark-circle big-icon"></i>
                                <h3>Complete Intelligence</h3>
                                <img src="resources/css/img/test.png" alt="placeholder" class="work-img" id="testing">
                            </figure>
                        </div>
                    </a>
                </li>

我没有收到任何错误，到目前为止，我的结果符合我的预期。只需要一些关于css的帮助。

Answer 1

没关系，我想通了。妈。我太傻了，这是一个简单的解决方法。 我所要做的就是：

.showcase .col:hover img{
opacity: 1;
}