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

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

QA

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

본문

안녕하세요 선배님들!

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

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

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

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>
답변을 작성하시기 전에 로그인 해주세요.
전체 2,660
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT