title: Why do the sibling elements as well as the parent element move when a transition is applied to an <a> element?
body: <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>article,
  aside,
  figure,
  footer,
  header,
  hgroup,
  nav,
  section,
  details,
  summary {
    display: block;
  }
  section.body-wrapper {
    position: relative;
    background-color: teal;
    width: 100%;
    min-width: 960px;
  }
  div.fixed-width {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px 10px;
  }
  .everything-wrapper p.desc-para {
    font-size: 18px;
    width: 460px;
    margin: 0 auto;
    padding: 40px 0px 27px;
  }
  div.links-wrapper {
    background-color: black;
    padding: 20px 0px 50px;
    margin: 0 auto;
    display: table;
    border-collapse: separate;
    border-spacing: 25px;
  }
  .a-link {
    display: table-cell;
    text-decoration: none;
  }
  div.the-div {
    font: 0px/0 a;
    border: coral 2px solid;
    height: 140px;
    width: 140px;
    transition: all 0.3s ease 0s
  }
  .the-div:hover {
    background-color: grey;
    border: coral 6px solid;
  }
  .caption {
    font-family: sans-serif;
    font-size: 14px;
    padding-top: 20px;
    text-align: center;
    color: white;
    font-weight: 100;
    transition: all 0.3s ease 0s;
  }
  .caption:hover {
    color: cyan;
    font-weight: 200;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="body-wrapper"&gt;
  
  
  
    &lt;div class="everything-wrapper fixed-width"&gt;
      &lt;p class="desc-para"&gt;Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.&lt;/p&gt;
  
      &lt;div class="links-wrapper"&gt;
  
        &lt;a class="a-link" href="#"&gt;
          &lt;div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;"&gt;Bulb&lt;/div&gt;
          &lt;p class="caption"&gt;Strangler Wrangler&lt;/p&gt;
        &lt;/a&gt;
  
        &lt;a class="a-link" href="#"&gt;
          &lt;div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;"&gt;Bulb&lt;/div&gt;
          &lt;p class="caption"&gt;Strangler Wrangler&lt;/p&gt;
        &lt;/a&gt;
  
        &lt;a class="a-link" href="#"&gt;
          &lt;div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;"&gt;Bulb&lt;/div&gt;
          &lt;p class="caption"&gt;Strangler Wrangler&lt;/p&gt;
        &lt;/a&gt;
  
        &lt;a class="a-link" href="#"&gt;
          &lt;div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;"&gt;Bulb&lt;/div&gt;
          &lt;p class="caption"&gt;Strangler Wrangler&lt;/p&gt;
        &lt;/a&gt;
  
        &lt;a class="a-link" href="#"&gt;
          &lt;div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;"&gt;Bulb&lt;/div&gt;
          &lt;p class="caption"&gt;Strangler Wrangler&lt;/p&gt;
        &lt;/a&gt;
  
      &lt;/div&gt;
      &lt;!-- .links-wrapper --&gt;
  
    &lt;/div&gt;
    &lt;!-- .everything-wrapper --&gt;
  
  
  
  &lt;/section&gt;
  &lt;!-- .body-wrapper --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In this SSCCE, when the <code>transition</code> is applied on <code>.a_link</code> when the mouse hovers over it (<code>a.a_link:hover {...}</code>), it moves as expected, but all of its siblings as well as its container also move. I want the siblings and the container and everything except itself to remain static/at-its-place and just this element should move on which the <code>transition</code> is applied. How can I achieve that?</p>