title: How to Scale Up a div on hover and Scale Down all other divs
body: <p>I've been trying to figure this out forever now but without success.</p>
  <p>Below are 6 circular divs.  When a user hovers over one of them, I want the hovered div to expand a bit (scale up) and all other divs to shrink a bit (scale down).</p>
  <p>I tested the following:</p>
  <pre><code>#container div:hover {
    transform: scale(1.1);
  }
  
  #container div:not(:hover) {
    transform: scale(0.9);
  }
  </code></pre>
  <p>However, this keeps all the divs scaled at 0.9 (I want them to only shrink when one of the other divs are hovered.</p>
  <p>I also tested the following:</p>
  <pre><code>#container div:hover {
    transform: scale(1.1);
  }
  
  #container:hover div:not(:hover) {
    transform: scale(0.9);
  }
  </code></pre>
  <p>However, since this shrinks all the divs when the entire container/parent element is hovered, not the individual divs, this solution doesn't work either.</p>
  <p>Basically, when a circle (and only that circle) is hovered, I want it to expand and all others to shrink.</p>
  <p>I'd very much prefer a pure CSS solution but I'm open to jQuery.
  <a href="https://i.stack.imgur.com/6NEj2.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6NEj2.jpg" alt="enter image description here" /></a></p>
  <p>I also have attached a jsfiddle, this is why using hover on a container doesn't work: <a href="https://jsfiddle.net/e5vjL7k7/" rel="nofollow noreferrer">https://jsfiddle.net/e5vjL7k7/</a></p>