html+css 动画制作简单的渐变效果（图片视频）

预览图😍😍😍

html代码😊😊😊

<div class="b6">
        <div>
            <a href=""><img class="imgage"
                    src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F811%2F040915120S0%2F150409120S0-5-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660731560&t=7de145ff2b5ab786ac6ab5e6502ee565"
                    alt="" style="display: block; width: 100%; height: 50%" /></a>
            <i class="bigbackground"></i>
            <i class="littlebackground"></i>
        </div>
        <div>这里放上你想要的东西</div>
    </div>

css代码🤗🤗🤗

<style>
        .b6 {
            margin: 200px auto;
            position: relative;
            overflow: hidden;
            flex-direction: column;
            width: 200px;
            height: 250px;
            background-color: #c2c2c2;
        }
        .b6 div:nth-child(2)  {
            margin: 35px;
            display: inline-block;
            text-align: center;
            font-size: 12px;
            color: black;
            background: transparent;
        }

        .b6 div a {
            text-decoration: none;
            color: #000;
            font-size: 14px;
        }
        .b6 div img {
            transition: all 0.6s;
        }
        .littlebackground {
            position: absolute;
            left: 68px;
            top: 32px;
            width: 70px;
            height: 70px;
            opacity: 0;
            transform: scale(0.7) translateZ(0);
            cursor: pointer;
        }

        .bigbackground {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 50%;
            background-color: #000;
            opacity: 0;
        }

        .b6 div:hover .littlebackground {
            opacity: 0.9;
            transform: scale(1) translateZ(0);
            transition-property: opacity, transform;
            transition-duration: 0.5s;
            cursor:pointer
        }

        .b6 div:hover .littlebackground {
            background-image: url(https://y.qq.com/ryqq/static/media/cover_play@2x.53a26efb.png?max_age=2592000);
            background-repeat: no-repeat;
            background-size: 70px 70px;
            opacity: 1;
        }

        .b6 div:hover .imgage {
            transform: scale(1.06);
        }

        .b6 div:hover .littlebackground {
            opacity: 1;
        }

        .b6 div:hover .bigbackground {
            opacity: 0.2;
            transition: opacity 0.5s;
        }
        /* 动画效果部分完结 */
    </style>

😎😎😎ps:
以后写样式经常会用到这种样式，直接复制就行了，但是我写的有写粗糙，可以自己再加上边框和一些样式哦，（有用的话点个赞再走呗）