title: remove child img tag when figure is flipped
body: <p>I am currently working with transform animation.
  When my mouse cursor is over the figure tag, it should be flipped and child img tag SHOULD BE HIDDEN. </p>
  
  <pre><code>        &lt;section id="FollowUs" class="container"&gt;
          &lt;figure class="col-md-4 facebook"&gt;
              &lt;img class="img-fluid facebook" src="http://www.orchidbox.com/userfiles/facebook_homepage(1).png"&gt;
              &lt;figcaption&gt;Facebook&lt;/figcaption&gt;
          &lt;/figure&gt;
          &lt;figure class="col-md-4"&gt;
              &lt;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"&gt;
              &lt;figcaption&gt;Instagram&lt;/figcaption&gt;
          &lt;/figure&gt;
          &lt;figure class="col-md-4"&gt;
              &lt;img class="img-fluid youtube" src="https://s.aolcdn.com/hss/storage/midas/7d58b1a08ffd698700a4388ee4f3f7fa/205220657/home-before.jpg"&gt;
              &lt;figcaption&gt;Youtube&lt;/figcaption&gt;
          &lt;/figure&gt;
          &lt;figure class="col-md-4"&gt;
              &lt;img class="img-fluid google" src="https://nickhughesblog.files.wordpress.com/2012/01/jan-2012.png"&gt;
              &lt;figcaption&gt;Google&lt;/figcaption&gt;
          &lt;/figure&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p>My CSS: </p>
  
  <pre><code>section#FollowUs figure{
    display:inline-block;
    position:relative;
    padding:0;
    -webkit-transition:all 2s 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{
    -webkit-transform:rotateY(180deg);
   }
   figure.facebook{
    background-color:#3b5998;
   }
   figure.instagram{
     background-color:#cd486b;
   }
   figure.youtube{
    background-color:red;
   }
   figure.google{
     background-color:#000;
    }
  </code></pre>
  
  <p>With my code, flipping is working but img won't be removed. </p>
  
  <pre><code>$('section#FollowUs figure').on('mouseover',function(){
      $(this).find('img').css('visibility','hidden');
  });
  </code></pre>
  
  <p>Tried this javascript code. It removes the image but I don't see background-color of the figure tag. </p>