如何使DIV占用剩余空间到底部的绝对位置容器中

• 我有一个容纳图像，一些文本和页脚的容器
• 图像位于顶部，下方是文本，其后是仅包含一些其他元数据的页脚
• 我希望能够将鼠标悬停在内容上（不包括页脚）并将其突出显示
• 我的问题是我无法使“文本” div一直延伸到绝对定位页脚开始的底部。
• 页脚将独立突出显示悬停。我不希望内容悬停影响页脚，也不想让页脚悬停影响内容
• 这是一个指向示例的codepen链接，该示例显示蓝色突出显示仅覆盖文本的底部，而不是整个面板，直到元数据页脚http://codepen.io/anon/pen/bVNeqr

这里的帮助或指导将不胜感激。

的HTML

 <div class="item">
     <div class="content"> 
         <div class="image">
             <img src="http://lorempixel.com/output/city-q-c-300-200-4.jpg"/>
         </div>
         <div class="text"> Text here </div>
     </div>
     <div class="footer"> Footer </div>
 </div>