지도 호버 시 호버한 영역 빼고 이미지 어둡게하는 방법 있을까요?

지도 호버 시 호버한 영역 빼고 이미지 어둡게하는 방법 있을까요?

QA

지도 호버 시 호버한 영역 빼고 이미지 어둡게하는 방법 있을까요?

답변 1

본문

안녕하세요 선배님들!

그누보드에 만들기는 하지만 그누보드와 관련 없는 기능을

어떻게 만들어야할지 몰라서 여기에 질문 남겨봅니다 !

구현하고싶은건 이미지에 여러건물이 있는데 각각 호버 시 아래와 같은 효과를 내고 싶습니다!

path를 이용해서 해야한다는 생각까지는 드는데 path값이나 위치조정같은게 조금 감이 안잡히네요..

클릭 시 지정한 링크로 이동하는것까지 만들어보고싶은데 참고할만한 예시 사이트나 방법이 있을까요?

 

호버 전

3076557694_1713946147.694.png

 

호버시

3076557694_1713946161.8992.jpg

이 질문에 댓글 쓰기 :

답변 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>
답변을 작성하시기 전에 로그인 해주세요.
전체 3
© SIRSOFT
현재 페이지 제일 처음으로