每日CSS小练习人物资料卡(图片hover之后展现人物介绍)

最新推荐文章于 2024-11-10 20:41:02 发布

爱洋芋的土豆丶

最新推荐文章于 2024-11-10 20:41:02 发布

阅读量213

点赞数

分类专栏：前端文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_45848992/article/details/120059027

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

效果如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .container {
           width: 200px;
           height: 300px;
           border-radius: 2em;
           position: relative;
       }
       .container > img {
           width: 100%;
           height: 100%;
           border-radius: 2em;
       }
       .img-info {
        width: 100%;
        height: 40px;
        padding: 11px 0 6px;
        background-color: rgba(45, 62, 80, 0.8);
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 0em 0em 2em 2em;
        opacity: 0.8;    
        overflow: hidden;               
        text-align: center;       
        /* 这里可以调动画的速度 */
        transition: all 0.5s linear; 
       }
       .img-info > p {
           color: #fff;
           margin-top: 0;
           margin-bottom: 0;
       }
       .img-info > h3 {
        font-size: 18px;
        font-weight: 500;
        margin-top: 0;
        margin-bottom: 0;
        color: #fff;
       }
       .container:hover .img-info{
           /* 这里调人物介绍覆盖的高度 */
            height: 80px;
       }
    </style>
</head>

<body>
    <div class="container">
        <img src="./img/路飞.png" alt="">
        <div class="img-info">
            <h3>路飞</h3>
            <p>Captain</p>
            <p class="self-intro">我是要成为海贼王的男人</p>
        </div>
    </div>
</body>

</html>