지도 호버 시 호버한 영역 빼고 이미지 어둡게하는 방법 있을까요?
본문
안녕하세요 선배님들!
그누보드에 만들기는 하지만 그누보드와 관련 없는 기능을
어떻게 만들어야할지 몰라서 여기에 질문 남겨봅니다 !
구현하고싶은건 이미지에 여러건물이 있는데 각각 호버 시 아래와 같은 효과를 내고 싶습니다!
path를 이용해서 해야한다는 생각까지는 드는데 path값이나 위치조정같은게 조금 감이 안잡히네요..
클릭 시 지정한 링크로 이동하는것까지 만들어보고싶은데 참고할만한 예시 사이트나 방법이 있을까요?
호버 전
호버시
답변 1
다음 코드가 도움이 될지 모르겠습니다.
<style>
.areas {
margin: 1em auto;
width: 650px;
height: 315px;
padding: 1em;
position: relative;
}
.areas::before {
content: '';
position: absolute;
inset: 0;
background-color: #ddd;
z-index: -1;
}
.areas > ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.areas a {
display: block;
padding: 0.2em 0;
text-align: center;
background-color: #eee;
}
.areas::before, .areas a {
transition: filter 0.2s;
}
.areas:hover::before,
.areas:hover a:not(:hover) {
filter: brightness(50%);
}
.areas .area-group-a {
width: 10%;
position: absolute;
left: 20%;
top: 30%;
rotate: -60deg;
transform: perspective(10em) rotateX(20deg) rotateY(20deg);
}
.areas .area-group-d {
width: 10%;
position: absolute;
left: 40%;
top: -20%;
rotate: -90deg;
transform: perspective(20em) rotateX(10deg) rotateY(50deg);
}
</style>
<div class="areas">
<ul class="area-group-a">
<li><a href="#">101</a></li>
<li><a href="#">102</a></li>
<li><a href="#">103</a></li>
<li><a href="#">104</a></li>
<li><a href="#">105</a></li>
<li><a href="#">106</a></li>
<li><a href="#">107</a></li>
<li><a href="#">108</a></li>
</ul>
<ul class="area-group-d">
<li><a href="#">401</a></li>
<li><a href="#">402</a></li>
<li><a href="#">403</a></li>
<li><a href="#">404</a></li>
<li><a href="#">405</a></li>
<li><a href="#">406</a></li>
<li><a href="#">407</a></li>
<li><a href="#">408</a></li>
<li><a href="#">409</a></li>
<li><a href="#">410</a></li>
</ul>
</div>
소중한 답변 정말 감사합니다!! 적용시켜봐야겠네요!
답변을 작성하시기 전에 로그인 해주세요.