CSS实现鼠标悬停图片放大的多种方法_F11 - 专业站长和开发者的学习网站

分享到

CSS实现鼠标悬停图片放大的多种方法

css 来源：互联网作者：佚名发布时间：2024-06-01 20:58:44 人浏览

摘要

1.背景图片放大使用css设置背景图片大小100%，同时设置位置和过渡效果，然后使用：hover设置当鼠标悬停时修改图片大小，实现悬停放大效果。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

1.背景图片放大

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

<!DOCTYPE html>

<head>

<style>

.box{

border: 5px solid black;

width: 400px;

height: 400px;

margin: 100px auto;

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

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

background-size: 100%;

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

background-position: 50% 50%;

/* 添加过渡效果 */

transition: all 1s;

}

.box:hover{

/* 鼠标悬停时放大 */

background-size: 120%;

}

</style>

</head>

<body>

</body>

</html>

2.img图片放大

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

<!DOCTYPE html>

<head>

<style>

.box {

border: 5px solid black;

width: 400px;

height: 400px;

margin: 100px auto;

/* 设置溢出隐藏 */

overflow: hidden;

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

display: flex;

justify-content: center;

align-items: center;

}

.box img {

/* 设置大小 */

width: 100%;

height: 100%;

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

transition: all 1s;

}

.box img:hover {

/* 鼠标悬停放大 */

width: 120%;

height: 120%;

}

</style>

</head>

<body>

</div>

</body>

</html>

3.使用transform: scale(1)

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

<!DOCTYPE html>

<head>

<style>

.box {

border: 5px solid black;

width: 400px;

height: 400px;

margin: 100px auto;

/* 设置溢出隐藏 */

overflow: hidden;

}

.box img {

width: 100%;

height: 100%;

/* 设置放大比例 */

transform: scale(1);

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

transition: all 1s;

}

.box img:hover {

/* 修改放大比例 */

transform: scale(1.2);

}

</style>

</head>

<body>

</div>

</body>

</html>

您可能感兴趣的文章 :

原文链接 :

Tag : css(326)

CSS3 grid布局的简单使用介绍

CSS3 grid 网格布局的使用 1.概述如果你要做成以下的这种效果，你会怎么做？你可以选择使用absolute绝对定位为这些块元素定位，也可以使用
CSS实现鼠标悬停图片放大的多种方法

1.背景图片放大使用css设置背景图片大小100%，同时设置位置和过渡效果，然后使用：hover设置当鼠标悬停时修改图片大小，实现悬停放大效
CSS鼠标悬浮动画-hover属性介绍

1. Grow-Shadow 鼠标移入盒子放大并出现底部阴影效果：代码 1 div class=box/div 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 .box { width: 200px; height: 200px;
css3实现类似地图定位循环扩散光圈效果(最新推荐

1.效果图,重点opacity,animation,transform:scale 2.html 1 2 3 4 5 6 7 8 9 div class=icon-warnCom icon class=icon-warnsi class=dot/ii class=pulse/i/icon /div div class=icon-warnCo
CSS的Flexbox布局介绍

CSS Flexible Box Module（简称Flexbox）是一种现代化的布局模式，用于创建响应式的一维布局（无论是水平还是垂直）。它提供了对项目的对齐、
css3中的var()函数介绍

css3的var()函数变量要以两个连字符--(横杆)(减号)为开头变量可以在:root{}中定义, :root可以在css中创建全局样式变量。通过 :root本身写的样式
CSS中去掉li前面的圆点方法(常见方法汇总)

在网页开发中，我们经常会使用无序列表（ul）来展示一系列的项目。默认情况下，每个列表项（li）前面都会有一个圆点作为标记。然而，
CSS的Flexbox布局示例介绍

CSS Flexible Box Module（简称Flexbox）是一种现代化的布局模式，用于创建响应式的一维布局（无论是水平还是垂直）。它提供了对项目的对齐、
echarts图表鼠标悬停时图例错位的解决方案

1、问题：当页面body拥有zoom属性之后，鼠标划过echarts图表时，触发位置就不正常 2、原因分析：这都是因为设置了zoom，如果你在你的项目
CSS实现div滑入效果

Vue3 + CSS实现div滑入 animation 定义动画 transform定义偏移 opacity，设置清晰度，实现从无到有 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 .entity-btn { position: abs