如何使用css显示下拉悬停效果

Question

我想要实现类似下面这个的动画 我想要同样的动画，确保悬停效果必须平滑，谁能帮忙

在此输入图片描述

悬停动画如下拉菜单 这就像文本在描述中缓慢显示动画，在悬停后显示..

Answer 1

根据您的需要调整

transition

和其他属性。

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    display: grid;
    place-items: center;
    min-height: 100vh;
}

.card {
    width: 400px;
    height: 400px;
    border: 2px solid grey;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    cursor: pointer;
    background-image: linear-gradient(
            rgba(128, 128, 128, 0.5),
            rgba(128, 128, 128, 0.5)
        ),
        url("https://www.shutterstock.com/image-photo/closeup-handsome-man-having-full-600nw-1854442684.jpg");
    background-position: right;
    background-size: cover;
    border-radius: 5px;
}

.card .hr {
    width: 20%;
    height: 2px;
    background-color: black;
    transition: background-color 0.2s linear;
}

.card .title {
    font-size: 1.5rem;
    font-weight: lighter;
}

.card .subtitle {
    font-size: 1rem;
    color: black;
    font-weight: bold;

    height: 1.5rem;
    overflow: hidden;
    transition: height 0.2s linear;
}

.card .details {
    height: 0;
    overflow: hidden;
    transition: height 0.2s linear;
    color: white;
    font-size: 1rem;
}

/* Card Hover */

.card:hover {
    background-image: linear-gradient(
            rgba(128, 128, 128, 0.7),
            rgba(128, 128, 128, 0.7)
        ),
        url("https://www.shutterstock.com/image-photo/closeup-handsome-man-having-full-600nw-1854442684.jpg");
}

.card:hover .hr {
    background-color: white;
}

.card:hover .title {
    color: white;
}

.card:hover .subtitle {
    height: 0;
}

.card:hover .details {
    height: 200px;
}

<div class="card">
            <div class="hr"></div>
            <h1 class="title">Deep Pressure Swedish</h1>
            <p class="subtitle">STARTING AT 170 $</p>
            <p class="details">
                Spanning the entire body, this massage provides absolute relaxation,
                while carrying out muscle massage adapted to your needs, thanks to
                varying degrees of pressure. In addition to relaxation, the various
                pressure techniques help eliminate painful knots and improve blood
                circulation.
            </p>
        </div>