Question

我有以下html标记

<div class="wrapper" style="position: relative;" >
 <img src="..." style="width:100%; height:auto">
<div class="description" style="position:absolute;left:0;bottom:0;width:100%">
figure caption
</div>
</div>

我处理图像上的点击以将图片移出图像的底部。 css标记看起来像

.wrapper.full .description{
transform: translate(0,100%);
}
.description{ transition: all .4s ease-in-out;}

但问题是包装器的高度并没有像我想的那样改变。我希望高度为h = image_heigth + caption_height 因为下面有更多内容，我想将其推下并为描述分配空间。实际上，描述显示在包装器之外，因为它不会改变大小并与其下面的内容重叠。有帮助吗？ JS代码

$('.wrapper img').click(function(){
var wrapper= $(this).parents('.wrapper');
wrapper.addClass('full');

)};

Answer 1

您可以尝试以下代码： HTML

<div class="wrapper" style="position: relative;" >
 <img src="http://lorempixel.com/200/200/" style="width:100%; height:auto">
<div class="caption" style="position:absolute;left:0;bottom:0;width:100%">
figure caption
</div>
</div>

<!--Design 2-->
<div class="wrapper sample_2" style="position: relative;" >
 <img src="http://lorempixel.com/200/200/" style="width:100%; height:auto">
<div class="caption" style="position:absolute;left:0;bottom:0;width:100%">
figure caption
</div>
</div>

的CSS

.wrapper{
    width:200px;
    height:200px;
    padding:10px;
    background:red;
    overflow:hidden;
    transition:all .5s;
}
.wrapper:hover{
    height:400px;
}
.wrapper .caption{
    width:100%;
    height:200px;
    top:220px;
    left:0;
    right:0;
    bottom:0;
    position:absolute;
    background:green;
    padding:10px;
    box-sizing:border-box;
}

/*Design 2*/
.wrapper.sample_2:hover{
    height:200px;
}
.wrapper.sample_2 .caption{
    transition:all .5s;
}
.wrapper.sample_2:hover .caption{
    top:0;
}

在jsfiddle

上查看此实时演示

请参阅jsfiddle-2

上的第二个演示

CSS转换不转换容器的高度

1 个答案: