要使用 CSS 制作图片放大镜效果，需要以下步骤：
在 HTML 中添加一个包含原始图像的 <div> 元素和一个空的 <img> 元素，用于显示放大图像。在 <div> 元素中，使用 CSS 的 background-image 属性将原始图像设置为背景图像，并设置 background-size 属性为所需的大小。
使用 CSS 的 position 属性将 <img> 元素定位到 <div> 元素的顶部，并设置 opacity 属性为 0，以便在鼠标悬停时逐渐显示。
使用 CSS 的 cursor 属性将鼠标指针设置为放大镜图标。
在 CSS 中添加一个 :hover 伪类选择器，以在鼠标悬停在 <div> 元素上时触发放大镜效果。
在 :hover 选择器中，使用 CSS 的 background-position 属性将原始图像移动到所需的位置，并使用 transform 属性缩放 <div> 元素。同时，将 <img> 元素的 opacity 属性设置为 1，以显示放大的图像。
以下是一个简单的示例代码：
<div class="zoom-container">
<div class="zoom-image" style="background-image: url('original-image.jpg'); background-size: 300px 300px;"></div>
<img class="zoomed-image" src="zoomed-image.jpg" alt="">
</div>.zoom-container {
position: relative;
width: 300px;
height: 300px;
}
.zoom-image {
width: 100%;
height: 100%;
}
.zoomed-image {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.zoom-container:hover .zoom-image {
transform: scale(1.5);
background-position: -50px -50px;
cursor: zoom-in;
}
.zoom-container:hover .zoomed-image {
opacity: 1;
}需要注意的关键词包括 background-image、background-size、position、opacity、:hover、background-position、transform、cursor 等。