如何实现鼠标经过图片时，另一张图片从左向右滑出，鼠标移开，图片恢复原样？(标签-CSS|关键词-for)

比较急，主要需求:用before和after伪类，hover来完成，别超过CSS的知识范围，希望发下所有的代码，非常感谢！我是个菜菜 搞了好久，都没成功😓

img


下面这两张是制作的素材 他们的背景色都是白的，看不到，但是点下就能看到了

img

img

感谢！
如果看不到那两张图片的话 我把截图发出来比较明显

img

img



<!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>
        .content {
            width: 100px;
            height: 100px;
            background-image: url('https://img-mid.csdnimg.cn/release/static/image/mid/ask/886398172356190.jpg?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit');
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;

        }

        .content::after {
            content: "";
            position: absolute;
            left: -100%;
            top: 0;
            width: 100px;
            height: 100px;
            background-image: url('https://img-mid.csdnimg.cn/release/static/image/mid/ask/886398172356190.jpg?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit');
            background-repeat: no-repeat;
            background-size: cover;
            transition: all 0.5s linear;
        }

        .content:hover::after {
            left: 0;
        }
    </style>
</head>

<body>
    <div class="content ">


    </div>
</body>

</html>

没有图片，重新发一下，我给你看看

先用transform:translateX()将home移出装logo的框，装logo的框要设置溢出隐藏，然后hover的时候将home的transform:translateX()设为0，设置transition动画就可以实现啦，当然前提是home要盖在logo上面