지도 호버 시 호버한 영역 빼고 이미지 어둡게하는 방법 있을까요?
mituhashi1218
1년 전
조회 11,841
안녕하세요 선배님들!
그누보드에 만들기는 하지만 그누보드와 관련 없는 기능을
어떻게 만들어야할지 몰라서 여기에 질문 남겨봅니다 !
구현하고싶은건 이미지에 여러건물이 있는데 각각 호버 시 아래와 같은 효과를 내고 싶습니다!
path를 이용해서 해야한다는 생각까지는 드는데 path값이나 위치조정같은게 조금 감이 안잡히네요..
클릭 시 지정한 링크로 이동하는것까지 만들어보고싶은데 참고할만한 예시 사이트나 방법이 있을까요?
호버 전
http://sir.kr/data/editor/2404/3076557694_1713946147.694.png" width="100%" />
호버시
http://sir.kr/data/editor/2404/3076557694_1713946161.8992.jpg" width="100%" />
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
1년 전
다음 코드가 도움이 될지 모르겠습니다.
</p>
<p><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;
}</p>
<p>.areas > ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.areas a {
display: block;
padding: 0.2em 0;
text-align: center;
background-color: #eee;
}</p>
<p>.areas::before, .areas a {
transition: filter 0.2s;
}
.areas:hover::before,
.areas:hover a:not(:hover) {
filter: brightness(50%);
}</p>
<p>.areas .area-group-a {
width: 10%;
position: absolute;
left: 20%;
top: 30%;
rotate: -60deg;
transform: perspective(10em) rotateX(20deg) rotateY(20deg);
}</p>
<p>.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></p>
<p> <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></p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
m
mituhashi1218
1년 전
소중한 답변 정말 감사합니다!! 적용시켜봐야겠네요!
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인