Html 如何在悬停时设置从上到下对齐的动画？

我正在寻找一种方法来动画与css的悬停过渡。我希望保持它的纯css。如果没有，我将使用jquery作为备份

这将是我的目标：

带有内容分区的容器，当悬停时，它会向上移动/滑动。如图所示：

我试过下面的代码。问题是，转换不会为

自动

零件设置动画。内容具有可变高度。所以每次都不一样。（每个网格项目）

我考虑了

transform:translateY（）
目标是在悬停时使其从上到下对齐。

（输入这个让我想到了另一件事。这在移动设备上是没有用的，对吗？：）
如果子元素和父元素之间存在已知关系，那么您可以轻松地应用翻译

这是一个基本的例子


.box{
高度：100px；
宽度：50px；
利润率：50像素；
边框：3倍实心；
位置：相对位置；
}
.盒子：以前{
内容：“；
位置：绝对位置；
排名：0；
宽度：100%；
身高：143%；
背景：红色；
过渡：1s全部；
}
.box:悬停：：之前{
转换：translateY（-30%）
/*143%是100%
100%是X%-->X=70%，所以我们按（100%-70%）移动
*/
}
这是我的
jQuery
方法。它比较容器和内容的大小。如果它比容器大，它会对差异进行动画处理，使其全部可见

var $ = jQuery;

$(document).ready(function () {

    $('.post_grid_item').hover(

        function() {

            $containter = $(this).find('.content_slide');
            $content = $(this).find('.content_slide > .vce-row-content');

            $content_height    = $content.outerHeight();
            $containter_height = $containter.outerHeight() ;

            // if content is bigger than container
            if( $content_height >  $containter_height ) {

                $content_hover_offset = $containter_height - $content_height;

                $content.animate({
                    top: $content_hover_offset + 'px',
                }, 'fast');
            }

        },function() {

            $containter = $(this).find('.content_slide');
            $content = $(this).find('.content_slide > .vce-row-content');

            $content.animate({
                top: '0',
            },'fast');
        }
    );


});

当添加特定的移动设备条件时，这将给我更多的条件灵活性

如果有人看到一些改进，请告诉我。
在移动设备中，点击操作将触发悬停状态。如果有错误，则第二个
.my\u container>中缺少一个点。my\u content
块。我没有看到任何
：悬停
。这是真正的CSS吗？正如您所说，它只适用于
px或%
，而不适用于
auto
。也许你可以用jQuery？@duanx，啊，那太好了great@MrLister，：）是的，忘记了
：悬停
。这是我的代码的简化版本yesWhoa，非常好。但有一件事，我发现我自己对这件事的解释有很大的错误。内部内容具有可变高度。它取决于每个网格项的文本长度。@Tim I knwon；）我只是给出了一个解决方案，以防你有一个高度设置使用百分比，因为我不认为有一个简单的通用解决方案与纯CSSYeah，我想是这样的。那么我将使用jquery。有了这些，我还可以考虑不同设备上的条件行为。：）我没有看到您的编辑。美好的干净整洁。我喜欢。谢谢非常精巧。
var $ = jQuery;

$(document).ready(function () {

    $('.post_grid_item').hover(

        function() {

            $containter = $(this).find('.content_slide');
            $content = $(this).find('.content_slide > .vce-row-content');

            $content_height    = $content.outerHeight();
            $containter_height = $containter.outerHeight() ;

            // if content is bigger than container
            if( $content_height >  $containter_height ) {

                $content_hover_offset = $containter_height - $content_height;

                $content.animate({
                    top: $content_hover_offset + 'px',
                }, 'fast');
            }

        },function() {

            $containter = $(this).find('.content_slide');
            $content = $(this).find('.content_slide > .vce-row-content');

            $content.animate({
                top: '0',
            },'fast');
        }
    );


});