By dororok 
HTML, CSS로 이미지 영역별 링크 지정하기
위의 사진과 같이 붉은 영역에 마우스를 갖다대면 버튼이 나오고, 클릭 시 페이지의 특정 영역으로 이동하는 기능이다.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
/* nav image */
.service-nav-img {
position: relative;
width: 100%;
}
.service-nav-img img {
max-width: 100%;
}
.service-nav-img {
text-decoration: none !important;
background: white;
}
.service-nav-img .anchor-sec1 {
height: 47%;
width: 26.5%;
position: absolute;
left: 28%;
top: 9.5%;
border: 1px solid red;
}
.nav-anchor:hover::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.service-nav-img .anchor-sec1:hover::after {
background-image: url('https://beansplashi.com/wp-content/uploads/2024/06/service_menu1.png');
content: '';
background-size: 14vw 14vw;
display: inline-block;
width: 14vw;
height: 14vw;
}
</style>
</head>
<body>
<div class="service-nav-img">
<img
src="https://beansplashi.com/wp-content/uploads/2024/06/서비스-상단-배너-scaled.jpg"
/>
<a class="anchor-sec1 nav-anchor" href="#service-link1"> </a>
</body>
</html>
링크에 클래스(class-example)을 적용한 다음, 붉은색 테두리를 참고하여 아래의 height, width, left, top 값을 적절히 바꾸어주면 된다.
.service-nav-img .class-example {
height: 47%; // 값 조정
width: 26.5%; // 값 조정
position: absolute;
left: 28%; // 값 조정
top: 9.5%; // 값 조정
border: 1px solid red;
}