CSS：相对值中的一个绝对元素（将div向上移动）

Question

我想在图形父级悬停（相对）中增加figcaption的高度（绝对）。 但是他将div移到下面。 但是，当一个容器中有两个父对象（相同的块）时，它可以工作  http://jsfiddle.net/amaramar/fLa0xvgy/133/ 如何避免将div悬停在下面？

我想拥有这个https://jsfiddle.net/amaramar/fLa0xvgy/160/，但只有一篇文章是父母，并且具有很好的CSS（figcaption宽度是其父母的100％。

.item{
  
    position:  relative;
    width: 294px;
  
}
figure{
  display: block;
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 00px;
    -webkit-margin-end: 0px;
  width:100%;
  border: 1px solid black;
}
figcaption{
  background-color:red;
  height:3.2rem;
 
  line-height:1.6rem;
  overflow:hidden;
  
}
AnotherDiv{
  background-color:yellow;
}
.item:hover figcaption{
  min-height:3.2rem;
   height:auto;
  overflow:visible;
  position:absolute;
}

    <div class="container">
  <article class="item ">
    <figure class="cadre">
        <a href="#">
              <picture> 
                  <!--[if IE 9]><video style="display: none;"><![endif]-->
                  <!--[if IE 9]></video><![endif]-->
                  <img src="https://dummyimage.com/294x272/bf9d13/0d0c0d&text=Image'294x272">  
              </picture>
        </a>		
        <figcaption>
            <div class="dfitem-title">
                <a href="/pp45437/Artemide.html"title="ARTEMIDE">ARTEMIDE</a>
            </div>
            <div class="dfitem-desc">		
              <div class="typeProduit  "><a href="#">typeProduit</a></div>
                    <strong class=" reference" title="Title ">Title</strong>
              </div>
              <div class="prixContainerPosition dfitem-price ">
                <span>155$</span>
              </div>
                <div><a href="#"><button>buy</button></a></div>
        </figcaption>
    </figure>
  </article>
  <div class="AnotherDiv">
    <h1>AnotherDiv</h1>
  </div>
</div>