title: Hide a .gif if it is beside another .gif
body: <p>I have a service where people can upload their images, and I display them on my website. I want to automatically hide a <code>.gif</code> if it is uploaded beside another <code>.gif</code>.</p>
  
  <p>I don't want this to effect images ending in <code>.png</code> or <code>.jpg</code>.. only <code>.gifs</code>.</p>
  
  <p>Here is an image example..</p>
  
  <p><img src="https://i.stack.imgur.com/jug4W.png" alt="enter image description here"></p>
  
  <p>If there are three <code>.gifs</code> in a row, only display the first one.</p>
  
  <p>I have tried selecting it, and hiding it, but this doesn't work at all.</p>
  
  <pre><code>img &gt; .gif{
      display:none;
  }
  </code></pre>
  
  <p>Do I need to use JavaScript or jQuery to achieve this?</p>