Jquery 子div继承高度设置为0的同级div的高度

我有一个有两个孩子的div

一个是隐藏的，保存着一些文本， 另一个是带有背景图像的div。 当我将鼠标悬停在父div上时，它会显示隐藏的文本div

我希望隐藏文本div的高度与backgound image div的大小相同

如果我将隐藏文本div size设置为100%，则div的高度太大

这里有一个例子

代码呢

.portfolioImage {
   width: 100%;
   height: auto;
   position: relative;
}
   .hiddenText {
   position: absolute;
   padding-top:10%;
   width:100%;
   height:100%;
   text-align:left;
   padding-left:10%;
   z-index:22;
   background-color:#000;
}
 .hiddenText h2 {
   color:#fff;
   text-transform: uppercase;
   font-weight:700;
}
   .hiddenText p {
   color:#fff;
}
   .image_frame {
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   ms-transition: all 0.3s ease;
   transition: all 0.3s ease;
   z-index:21;
   opacity: 1.0;
   position:relative;
   background-size: 100%;
   width: 100%;
   padding-top:100%;
   height: 0;
}
.lowerOpacity {
   opacity:0.9;
}

div class="container">
    <div class="row no-gutter">
        <div class="col-xs-6 col-sm-4 col-md-3">
            <div class="portfolioImage">
                <div class="footerBar">
                        <h2>Title 1</h2>

                    <p>extra text snippet...</p>
                </div>
                <div class="image_frame" style="background-image: url('https://placekitten.com/g/200/300'); background-repeat:no-repeat;"></div>
            </div>
        </div>
        <!-- /col-->
    </div>
    <!-- /row-->
</div>
<!-- /container-->

$('.hiddenText').hide();

var formType = '';
$('.portfolioImage').hover(

function () {
    $(this).find(".hiddenText").addClass("lowerOpacity");
    $(this).find('.hiddenText').show();

}, function () {
$(this).find(".hiddenText").removeClass("lowerOpacity");
$(this).find('.footerBar').hide();
});

由于图像具有响应性，我无法硬编码隐藏div的高度

---

有没有人知道我该如何解决这个问题，或者我让事情变得复杂了？

添加

框大小：边框框

到

.hiddenText

类。这将使容器的长方体模型将填充作为100%维度的一部分

.hiddenText {
    position: absolute;
    box-sizing:border-box;
    padding-top:10%;
    width:100%;
    height:100%;
    text-align:left;
    padding-left:10%;
    z-index:22;
    background-color:#000;
}

更新的小提琴：

---

无需javascript即可完成所有这些操作

这里有一个演示：

相关CSS更改：

body
{
    margin:0;
}

.portfolioImage 
{
    position: relative;
}

.hiddenText {
    position: absolute;
    z-index:2;
    top: 0;
    right:0;
    bottom:0;
    left: 0; 
    padding: 10%;    
}

.image_frame 
{
    position:relative;
    background-size: 100%;
    /*maybe you need to alter this*/
    height: 100vh;
}

.hiddenText
{
  transition: all 0.3s ease;
  opacity: 0;
}

.portfolioImage:hover .hiddenText
{
    opacity: 0.9;
}

也许我的代码会给你一个指针，让你只使用html和css就可以做这样的事情

它使用常规的

也许可以给你一个指针，让你只使用html和cssif来做类似的事情。如果你想回答这个问题，我可以接受它作为一个解决方案，因为我可以使用你的代码将其重新安装到我的代码中……brill thanksNice！谢谢，请注意，悬停内容不能大于图像。您是否尝试从JSFIDLE复制css？我删除了一些文本类声明作为答案，因为它们对答案并不重要。我认为其他因素会干扰css。

body
{
    margin:0;
}

.portfolioImage 
{
    position: relative;
}

.hiddenText {
    position: absolute;
    z-index:2;
    top: 0;
    right:0;
    bottom:0;
    left: 0; 
    padding: 10%;    
}

.image_frame 
{
    position:relative;
    background-size: 100%;
    /*maybe you need to alter this*/
    height: 100vh;
}

.hiddenText
{
  transition: all 0.3s ease;
  opacity: 0;
}

.portfolioImage:hover .hiddenText
{
    opacity: 0.9;
}