html css鼠标悬停放大
时间: 2024-11-12 08:16:18 浏览: 3
css 实现鼠标悬停放大图片
HTML 和 CSS 结合可以创建动态效果,比如鼠标悬停时元素的放大。这个效果通常是通过CSS伪类`:hover`来实现的。以下是一个简单的示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
/* 鼠标悬停时元素放大 */
.image-container {
position: relative;
overflow: hidden; /* 控制溢出内容隐藏 */
}
.image-container img {
transition: transform 0.3s ease; /* 添加过渡效果,让放大更平滑 */
}
.image-container img:hover {
transform: scale(1.1); /* 当鼠标悬停时,缩放图片至110%大小 */
}
</style>
</head>
<body>
<div class="image-container">
<img src="your-image-url.jpg" alt="Your Image">
</div>
</body>
</html>
```
在这个例子中,当用户的鼠标指针移动到图片上时,图片会平滑地放大10%,直到用户移开手指。你可以将`your-image-url.jpg`替换为实际的图片URL。
阅读全文