Css 翻转图形时移除子img标记

我目前正在处理变换动画。 当我的鼠标光标位于figure标记上时，应该将其翻转，并且应该隐藏子img标记

        <section id="FollowUs" class="container">
        <figure class="col-md-4 facebook">
            <img class="img-fluid facebook" src="http://www.orchidbox.com/userfiles/facebook_homepage(1).png">
            <figcaption>Facebook</figcaption>
        </figure>
        <figure class="col-md-4">
            <img class="img-fluid instagram" src="https://cloud.addictivetips.com/wp-content/uploads/2013/07/How-to-embed-Instagram-videos-and-photos-on-a-website-Step-1_.jpg">
            <figcaption>Instagram</figcaption>
        </figure>
        <figure class="col-md-4">
            <img class="img-fluid youtube" src="https://s.aolcdn.com/hss/storage/midas/7d58b1a08ffd698700a4388ee4f3f7fa/205220657/home-before.jpg">
            <figcaption>Youtube</figcaption>
        </figure>
        <figure class="col-md-4">
            <img class="img-fluid google" src="https://nickhughesblog.files.wordpress.com/2012/01/jan-2012.png">
            <figcaption>Google</figcaption>
        </figure>
    </section>

在我的代码中，翻转是有效的，但img不会被删除

$('section#FollowUs figure').on('mouseover',function(){
    $(this).find('img').css('visibility','hidden');
});

尝试了此javascript代码。它删除了图像，但我看不到地物标记的背景色

找到了解决方案。 我犯了几个错误。 首先，figcaption的背景色是不必要的

第二，我复制了选择器。有两个数字。谷歌选择器

第三，我没有设置图形标记的类

最后，翻转后没有显示背景，因为figure.facebook DOM元素没有任何背景样式

现在它可以正常工作了 这是css代码，工作正常

section#FollowUs figure{
display:inline-block;
position:relative;
padding:0;
-webkit-transition:all 0.5s ease-in-out;

}

section#FollowUs img{
border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
-ms-border-radius:10px;
-moz-border-radius:10px;
backface-visibility:hidden;
}
figure.facebook:hover, figure.google:hover, figure.instagram:hover, 
figure.youtube:hover{
-webkit-transform:rotateY(180deg);
}
figure.facebook{
background-color:#3b5998;
}
figure.instagram{
background-color:#cd486b;
}
figure.youtube{
background-color:red;
}
figure.google{
background-color:#000;
}

javascript

$('section#FollowUs figure').on('mouseover',function(){
    $(this).find('img').css('visibility','hidden');
});

---

答案中的代码与问题中的代码几乎相同（基本上，您添加了缺少的

图。*:hover

），因此很难看到此问答对的好处。

$('section#FollowUs figure').on('mouseover',function(){
    $(this).find('img').css('visibility','hidden');
});