如何在保持高度的同时让卡片内容在悬停时向上滑动？

Question

我正在创建一个带有图像卡片的 UI，我希望卡片内容在悬停时向上滑动。

麻烦的是卡片内容的高度会有所不同，所以卡片需要能够垂直增长，而且图片可能不都是一样大小的，所以可能需要用background-size: cover;设置为背景图片.

我曾尝试在.card-hover div 上使用绝对定位，但这会折叠卡片高度，所以这是不可能的。

这里是代码：-

<section class="people">
        <div class="row no-gutters justify-content-center">
            <div class="col-12 col-md-6 col-lg-4">
                <div class="card" style="background-image: url('https://via.placeholder.com/600')">
                    <div class="card-hover">
                        <div class="card-body">
                            <h4 class="card-title">Jane Doe</h4>
                            <h5 class="card-subtitle">Managing Director</h5>
                            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu
                                orci
                                non
                                erat eleifend pellentesque. Proin eleifend libero in risus viverra venenatis.</p>
                            <p class="card-text">Donec interdum turpis sit amet dapibus fringilla. Mauris volutpat
                                suscipit
                                ullamcorper. Sed elementum, odio sit amet molestie congue, arcu nunc tempus nisl,
                                vel
                                auctor
                                tellus urna ac orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
                                sit
                                amet
                                eros elementum odio sagittis commodo.</p>
                            <p class="card-text">Vestibulum hendrerit aliquam nunc, vitae fermentum est finibus ac.
                                Vivamus
                                porta velit id tempus hendrerit.</p>
                        </div>
                        <div class="card-footer row no-gutters">
                            <div class="col text-left p-0">
                                <ul class="list-unstyled">
                                    <li><a href="#" class="card-link"><i
                                                class="fas fa-envelope fa-fw"></i>test@domain.com</a>
                                    </li>
                                    <li><a href="#" class="card-link"><i class="fas fa-phone fa-fw"></i>+44 (0)123
                                            456
                                            7890</a></li>
                                    <li><a href="#" class="card-link"><i class="fas fa-mobile fa-fw"></i>+44 (0)123
                                            456
                                            7890</a></li>
                                </ul>
                            </div>
                            <div class="col text-right p-0 align-self-end">
                                <ul class="list-inline">
                                    <li class="list-inline-item m-0">
                                        <a href="#">
                                            <span class="fa-stack fa-stack-lg" style="vertical-align: top;">
                                                <i class="far fa-circle fa-stack-3x"></i>
                                                <i class="fab fa-linkedin-in fa-stack-1x"></i>
                                            </span></i>
                                        </a>
                                    </li>
                                    <li class="list-inline-item m-0">
                                        <a href="#">
                                            <span class="fa-stack fa-stack-lg" style="vertical-align: top;">
                                                <i class="far fa-circle fa-stack-3x"></i>
                                                <i class="fab fa-twitter fa-stack-1x"></i>
                                            </span></i>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

和scss

.people {
    .card {
        background-size: cover;
        background-position: center top;
      color: #fff;

        .card-hover {
            background: rgba(0, 0, 0, 0.7);
            opacity: 0;
            -webkit-transition: all 0.4s ease-in-out 0s;
            -moz-transition: all 0.4s ease-in-out 0s;
            transition: all 0.4s ease-in-out 0s;

            &:hover {
                opacity: 1;
            }

            .card-body {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 20px;

                .card-title {
                    font-size: 1.75rem;
                    padding-bottom: 12px;
                    margin-bottom: 1rem;

                    &:before {
                        left: 50%;
                        margin-left: -30px;
                    }
                }

                .card-subtitle {
                    &:before {
                        display: none;
                    }

                    margin-bottom: 1rem;
                }

                .card-text {
                    font-weight: 300;
                    font-size: 0.8125rem;
                    text-align: left;
                }
            }

            .card-footer {
                border-radius: 0;
                border-top: none;
                padding: 10px 20px;
                background-color: transparent;

                li {
                    a {
                        color: #f1f1f;

                        i {
                            color: #fff;
                            margin-right: 5px;
                        }

                        .fa-stack-lg {
                            height: 3em;
                            line-height: 3em;
                            width: 3em;
                        }

                        .fa-stack {
                            i {
                                color: #fff;

                                &:hover {
                                    color: #f1f1f1;
                                }
                            }

                            .fa-stack-3x {
                                font-size: 2.5rem;
                                left: 0;
                                position: absolute;
                                text-align: center;
                                width: 100%;
                            }
                        }
                    }

                }
            }
        }
    }
}

你可以在 Codepen here看到它

我希望在内容向上滑动的同时保持卡片高度（由卡片内容定义）。我该怎么做？

提前感谢您的帮助。

Answer 1

阅读问题中的整个长文本需要很长时间，所以如果我明白你的意思，请检查这个 jsfiddle

.outer {
  width: 300px;
  height: 200px;
  overflow: hidden;
  background: orange;
}

.inner {
  transition: all 0.3s;
  width: 100%;
  height: 100%;
  background: red;
}

.outer:hover > .inner {
  transform: translateY(-100%);
}
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outer">
  <div class="inner"></div>
</div>