animate out image on click function while overlapping its sibling elements
<p>First time user and in need of help. </p>

<p>I have three <code>li li li</code> elements, each has their own <code>&lt;img&gt;</code> inside it. I would like to <strong>animate</strong> the individual <code>&lt;img&gt;</code> inside outwards while overlapping other sibling elements (in this expanding effect, the siblings shouldn't be moving,)when the selected element is clicked.</p>

<p>The HTML markup i have:</p>

<pre><code>&lt;div class="wrapper"&gt;
   &lt;ul&gt;
     &lt;li class="card"&gt;
        &lt;div class="content"&gt;
          &lt;img src="some-img.jpg"&gt;
        &lt;/div&gt;
     &lt;/li&gt;
     &lt;li class="card"&gt;
        &lt;div class="content"&gt;
          &lt;img src="some-img.jpg"&gt;
        &lt;/div&gt;
     &lt;/li&gt;
     &lt;li class="card"&gt;
        &lt;div class="content"&gt;
          &lt;img src="some-img.jpg"&gt;
        &lt;/div&gt;
     &lt;/li&gt;
   &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>CSS Markup:</p>

<pre><code>.card {
  position: relative;
  width: 28%;
  height: 100px;
  float: left;
  margin: 2.5%;
  overflow: hidden;
}


.content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: -50%;
  left: 0;
  transition: all 1s ease-in;
}

img {
  width: 100%;
}
</code></pre>

<p>JS:</p>

<pre><code>$('.card').on('click','.content',function(){
  $(this).css({
     'position':'fixed',
     'z-index':'10'          
  });
});
</code></pre>

<p>I've done different iterations of this code back and forth, but setting the position of the <code>.content</code> to fixed does somewhat close to what i'm trying to do, it overlaps the other siblings... but without any smooth transitions flowing outwards. </p>

<p>Here is a link to the code in codepen: <a href="http://codepen.io/broham89/pen/WrJmyB" rel="nofollow">http://codepen.io/broham89/pen/WrJmyB</a></p>

<p>I <strong>very very</strong> much appreciate any help on this.</p>