在CSS中,hover偽類選擇器本身不能直接實現縮放效果。但是,您可以使用CSS的transform
屬性來實現縮放效果。以下是一個簡單的示例:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Hover Zoom Effect</title>
</head>
<body>
<div class="zoom-container">
<img src="your-image-source" alt="Your Image Description" class="zoom-image">
</div>
</body>
</html>
CSS (styles.css):
.zoom-container {
display: inline-block;
cursor: pointer;
}
.zoom-image {
transition: transform 0.2s; /* 過渡效果,可使縮放更平滑 */
}
.zoom-container:hover .zoom-image {
transform: scale(1.2); /* 設定放大倍數,例如1.2表示放大至原始尺寸的120% */
}
在這個示例中,當鼠標懸停在包含圖像的容器上時,圖像會以1.2倍的大小縮放。您可以根據需要調整放大倍數。