css hover

 

css  hover

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>鼠标事件</title>
    <style>
        .recommends-content-item{
            width: 33%;
            height: 280px;
            margin-right: 1rem;
            /* height: 15rem; */
            background: #eee;
            position: relative;
        }
        .recommends-content-item:hover .recommends-content-item__info{
            opacity: 1;
            transform:  translateY(0%);
        }
        .recommends-content-item__info{
            position: absolute;
            bottom: 0;
            color: rgba(255, 255, 255, 0.8);
            background: rgba(34,34,34,0.35);
            padding: 0 0.5rem;
            text-align: center;
            overflow: hidden;
            width: 100%;
            box-sizing: border-box;
            transition: 0.3s;
            opacity: 0;
            transform:  translateY(0%);
        }
    </style>
</head>

<body>
    <li class="recommends-content-item">
        <img src="../img/pages/home/img.png" alt="">
        <div class="recommends-content-item__info">
            <h3 class="ellipsis">标题1</h3>
            <p class="ellipsis">描述描述描述描述描描述描述描述描述描述描述描述描述描</p>
        </div>
    </li>
</body>

</html>

 

posted @ 2023-02-08 10:49  虚无——缥缈  阅读(27)  评论(0)  编辑  收藏  举报