0


CSS 实现鼠标移动到图片上图片变大,不改变盒子大小

介绍

实现鼠标经过图片时,图片等比放大,但是图片的父盒子不会改变;主要使用了

css

的动画来实现。

实现效果

在这里插入图片描述

代码

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><style>.box{height: 400px;width: 400px;border: 10px solid red;margin: 100px auto;/* 设置overflow: hidden 当放大的时候超出部分隐藏 */overflow: hidden;}.box img{display: inline-block;height: 100%;width: 100%;cursor: pointer;transition: all .6s;}.box img:hover{transform:scale(1.2);}</style><body><divclass="box"><imgsrc="./images.jpg"alt=""></div></body></html>
标签: css css3 前端

本文转载自: https://blog.csdn.net/Shivy_/article/details/129306134
版权归原作者 发呆的薇薇° 所有, 如有侵权,请联系我们删除。

“CSS 实现鼠标移动到图片上图片变大,不改变盒子大小”的评论:

还没有评论