[分享]css3图片悬浮左右滑动

CSS3提供了很多有趣的特性，其中之一就是让图片在鼠标悬浮时可以左右滑动，接下来我将简单介绍如何实现这个效果。 Slide Left/Right 我们通过一个外部容器包含一张图片和一个带有文...

CSS3提供了很多有趣的特性，其中之一就是让图片在鼠标悬浮时可以左右滑动，接下来我将简单介绍如何实现这个效果。

 <div class="container">
        <a href="#">
            <img src="your-image-url" alt="your-image">
            <span class="slide-text">Slide Left/Right</span>
        </a>
    </div> 

我们通过一个外部容器包含一张图片和一个带有文本的链接，然后通过CSS设置当鼠标悬浮在链接上时图片会滑动。

 .container {
        position: relative;
        display: inline-block;
        overflow: hidden;
    }
    .slide-text {
        position: absolute;
        bottom: 0;
        left: -100%;
        width: 100%;
        height: 50px;
        line-height: 50px;
        color: #fff;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.7);
        transition: 0.5s;
    }
    .container:hover .slide-text {
        left: 0;
    }
    .container img {
        display: block;
        width: 100%;
    } 

我们首先设置外部容器为相对定位，并且设置溢出为隐藏，这是因为我们只想要鼠标悬浮时的滑动效果，而不希望整张图片一直可见。

接下来设置文本标签的样式，让它一开始的位置在图片之外，当鼠标悬浮在链接上时让文本标签滑动到图片上。

最后设置图片的宽度为100%以自适应外部容器，这样就实现了图片悬浮时的滑动效果。