您正在使用 IPV4 [44.221.73.157] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
悟空收录网       [公益]保护绿色环境,构建和谐社会      

【腾讯云】2核2G4M云服务器新老同享99元/年,续费同价      
[公益] 地球是我家,绿化靠大家      
2024年 七夕节 056
2025年 高 考 357
2025年 元 旦 200
2025年 春 节 228
 
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
CSS实现鼠标悬停图片放大的多种方法
内容摘要: 1.背景图片放大使用css设置背景图片大小100%,同时设置位置和过渡效果,然后使用:hover设置当鼠标悬停时修改图片大小,实现悬停放大效果。!DOCTYPEhtmlhtmllang='en'headmetacharset='UTF-8'metaname='viewport'content='width=device-width,initial-scale......
1.背景图片放大

使用css设置背景图片大小100%,同时设置位置和过渡效果,然后使用:hover设置当鼠标悬停时修改图片大小,实现悬停放大效果。

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<title>测试</title>

<style>

.box{

border:5pxsolidblack;

width:400px;

height:400px;

margin:100pxauto;

background-image:url(./1.png);

/*设置背景大小为100%*/

background-size:100%;

/*设置背景图片位置*/

background-position:50%50%;

/*添加过渡效果*/

transition:all1s;

}

.box:hover{

/*鼠标悬停时放大*/

background-size:120%;

}

</style>

</head>

<body>

<divclass="box"></div>

</body>

</html>

2.img图片放大

在div中添加img元素,给div添加弹性布局保证图片始终位于居中位置,当鼠标悬停于img时修改图片大小。

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<title>测试</title>

<style>

.box{

border:5pxsolidblack;

width:400px;

height:400px;

margin:100pxauto;

/*设置溢出隐藏*/

overflow:hidden;

/*使用弹性布局保证图片居中*/

display:flex;

justify-content:center;

align-items:center;

}

.boximg{

/*设置大小*/

width:100%;

height:100%;

/*给图片添加过渡效果*/

transition:all1s;

}

.boximg:hover{

/*鼠标悬停放大*/

width:120%;

height:120%;

}

</style>

</head>

<body>

<divclass="box">

<imgsrc="./1.png"alt="">

</div>

</body>

</html>

3.使用transform:scale(1)

使用这一方法与img放大类似,不过好处是不用手动设置图片居中,transform:scale(1);会在原位置上放大。

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<title>测试</title>

<style>

.box{

border:5pxsolidblack;

width:400px;

height:400px;

margin:100pxauto;

/*设置溢出隐藏*/

overflow:hidden;

}

.boximg{

width:100%;

height:100%;

/*设置放大比例*/

transform:scale(1);

/*给图片添加过渡效果*/

transition:all1s;

}

.boximg:hover{

/*修改放大比例*/

transform:scale(1.2);

}

</style>

</head>

<body>

<divclass="box">

<imgsrc="./1.png"alt="">

</div>

</body>

</html>

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:CSS中去掉li前面的圆点方法

 

下一篇:没有了

发布日期:2024/6/2
手机扫二维码直达本页
发布时间:21:55:30
点  击:8
录  入:齐天大圣
相关文章
Baidu
YiJiaCMS 7.5.1 build240527(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,Cloudflare提供加速防护
运行时间载入中.....