H5制作点击图片变成大图
时间: 2023-09-13 15:06:19 浏览: 46
要实现点击图片变成大图,可以使用HTML5中的`<img>`标签和CSS3中的伪类`:hover`来实现。具体实现步骤如下:
1. 首先,在HTML文件中添加一个`<img>`标签,指定要显示的图片路径:
```html
<img src="images/picture.jpg" alt="Picture">
```
2. 然后,在CSS文件中为`<img>`标签添加样式,包括图片的尺寸、居中等:
```css
img {
display: block;
margin: 0 auto;
width: 300px;
height: 200px;
}
```
3. 接着,在CSS文件中添加`:hover`伪类,当鼠标悬停在图片上时,显示大图,具体实现方法可以使用`transform: scale()`来实现缩放效果,同时使用`position: absolute`和`z-index`来控制大图的位置和层级:
```css
img:hover {
position: relative;
z-index: 1;
transform: scale(2);
}
```
完整的HTML和CSS代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Click to enlarge</title>
<style>
img {
display: block;
margin: 0 auto;
width: 300px;
height: 200px;
}
img:hover {
position: relative;
z-index: 1;
transform: scale(2);
}
</style>
</head>
<body>
<img src="images/picture.jpg" alt="Picture">
</body>
</html>
```
注意,这里的`<img>`标签的`src`属性值应该替换为你自己的图片路径。