html - 如何在不影响文本的情况下为 div 类中的图像进行过渡？

Question

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

或者更好的是，如何让 div 的过渡只影响内部的图像？

我应该先说我是 html 和 css 的新手。我试过这样做，当我将鼠标悬停在图像上时，它的不透明度会变为 1。当我将鼠标悬停在 div/列上而不更改 div/列中文本的不透明度时，我希望不透明度更改为 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;
}