css3实现鼠标悬浮图片放大效果外框固定

最新推荐文章于 2024-09-23 13:41:34 发布

任朝暮

最新推荐文章于 2024-09-23 13:41:34 发布

阅读量1.3k

点赞数 1

分类专栏： vue前端开发

本文链接：https://blog.csdn.net/qq_43498712/article/details/121495416

版权

css3 css html5

vue前端开发专栏收录该内容

22 篇文章 0 订阅

订阅专栏

css3实现鼠标悬浮图片放大效果外框固定

示例实现几行代码写出鼠标在图片上方停留，图片通过过渡效果放大，增强界面交互体验感。

关键代码-html

<div class="rightL2_isclick" @click="setNavBarHander(item.id)" title="点击进入tableau报表">
        <img style="width:100%;height:100%" :src="item.imgUrl" alt />
</div>

关建代码-css

.rightL2_isclick {
        height: 200px;
        width: 100%;
        cursor: pointer;
        //外框固定
        overflow: hidden; 
        img {
            width: 100%;
            height: 100%;
            //过度时间
            transform: scale(1);
            transition: transform 1s ease 0s;
        }
        img:hover{
        //过渡
            transform: scale(1.05);
        }
    }