CSS 鼠标悬停图片同时向上下伸长的方法

最新推荐文章于 2023-05-10 20:36:46 发布

sjc0511

最新推荐文章于 2023-05-10 20:36:46 发布

阅读量356

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/sjc0511/article/details/129477784

版权

刚才做了个任务需要实现鼠标悬停到图片上图片同时向上向下延长一点

hover里将height变长以后图片只是向下伸展

搜了很多信息也没有找到有没有参数可以实现上下同时伸长

于是想了个办法

用transformer:translatedy(-50px);

实现了同时向上向下延展

原理是图片会同时进行向上移动和向下伸展的动画，所以看到的是同时伸展

.img {
    height: 300px;
    width: 260px;
    display: inline-block;
    background-size: cover;
    background-repeat: no-repeat;

    background-position: center;
}

.img:hover {
    height: 350px;
    transition: 0.5s;
    transform:translateY(-25px);
}

tips:当时想的是向上移动的距离和总体增长的距离的比例最好保持1:2 否则两个方向延长的速度可能会看起来不协调