当我在 HTML 中悬停时影响多个图像

Question

我想将鼠标悬停在图片上。当我将鼠标悬停在它上面时，图像的不透明度会降低并且文本会出现在图像上。我有点做了。在我的容器中，我有 3 个不同的图像，它们具有相同的 class 名称。我想这就是为什么当我悬停一张图片时其他两张图片受到影响。我该如何解决？由于我一直在尝试解决它很长时间，所以我的大脑停止工作了。

当我将鼠标悬停在一张图片上时，我想要什么，只有那张图片会受到影响。这是我的代码。谢谢大家

         <div class="main-blog-items">
                    <div class="blog-baslik">
                        <h4>BLOG & HABERLER</h4>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="blog-icerik">
                                <div class="blog-img">
                                    <img src="img/carousel2.jpg">
                                </div>
                                <div class="overlay-blog">
                                    <div class="blog-content">Blog Yazısı 1</div>
                                </div>
                            </div>
                            <div class="blog-item-title">
                                <p>Title</p>
                            </div>
                        </div>
    .overlay-blog {
                transition: .5s ease;
                opacity: 0;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
            }
            
            
            .main-blog-items:hover .blog-img {
                opacity: 0.3;
            
            }
            .main-blog-items:hover .blog-item-title{
                opacity: -5;
            
            
            }
            .main-blog-items:hover .overlay-blog {
                opacity: 1;
            
            }

Answer 1

改用这个

.blog-icerik:hover  {
opacity: 0.3;

}
.blog-icerik:hover  .overlay-blog {
opacity: 1;

}

.blog-icerik:hover ~ .blog-item-title{
opacity: 0;


}

当我在 HTML 中悬停时影响多个图像

Affecting several images when I do hovering in HTML

html

css

hover