如何翻卡和成长卡但不缩放内容？

Question

我正在尝试创建一个功能，即卡片在悬停时翻转，然后卡片会增长以适应内容，但内容不会。页面本身也应该按下其他内容，这样就没有重叠了。

我设法让翻盖工作但不是成长。这是我的代码：

            <div class="card" id="first-card" ontouchstart="this.classList.toggle('hover');">
                <figure class="front"></figure>
                <figure class="back">
                    <div class="back-content">
                        <h3>Lorem Ipsum</h3>
                        <hr>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id lacus nisl. Vestibulum nec lectus at purus sodales ultricies. Quisque in ultrices leo. Nulla tempus pretium maximus. Proin non odio at enim scelerisque tempor eget at ligula. Cras at eros velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam in urna bibendum, posuere ligula sit amet, tincidunt magna.</p>
                    </div></figure>
            </div>

CSS

   .card .back {
        -webkit-transform: rotateY( 180deg);
        transform: rotateY( 180deg);
        position: relative;
    }

    .card.flipped {
        -webkit-transform: rotateY( 180deg) height 1s ease-in-out;
        transform: rotateY( 180deg) height 1s ease-in-out;
    }


    #first-card .front {
        background: url('card-img.jpg');
        z-index: 2;
    }

    #first-card .back {
        background: #fff;
    }

JS：

$(document).on('mouseenter', '.front', function (event) {
    $(this).parent().addClass('flipped');
    $(this).parent().addClass('expand');
}).on('mouseleave', '.card', function () {
    $(this).removeClass('flipped');
});

任何帮助将不胜感激，谢谢！