벡터의 일부를 가리키면 어떻게 이미지를 확대 할 수 있습니까?

Question

페이지의 왼쪽 상단에는 주로 오프 스크린으로 표시되는 홈 버튼 1 개가 있습니다. 나는 그것의 크기를 조금씩 늘리고 싶습니다. 그러나 아무 것도 시도하지 않는 것 같습니다.

이미지로 보는 것은 (신에게 감사드립니다) 완벽한 원입니다. 지역 태그를 사용하면 쉽게 홈 버튼으로 만들 수 있습니다. 이제 해당 영역 태그 위로 마우스를 가져갈 때 이미지를 확대하고 싶습니다. '+'선택기로 작업을 시도했습니다.

어떻게하면 좋을까요?

.emblem { 
 
    width: 200px; 
 
    height: 200px; 
 
    position: absolute; 
 
    margin: -100px 0px 0px -80px; 
 
    z-index: 2; 
 
    opacity: 0.9; 
 
} 
 
.emblem:hover { 
 
    width: 220px; 
 
    height: 220px; 
 
} 
 
.emblem2 { 
 
    visibility: hidden; 
 
    width: 220px; 
 
    height: 220px; 
 
} 
 
area:hover + .emblem2 { 
 
    visibility: visible; 
 
}

<map name="homemap"> 
 
    <area shape="circle" coords="100,100,100" alt="Home button" href="index.html" /> 
 
</map> 
 
<img class="emblem" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="UFF emblem" usemap="#homemap" /> 
 
<img class="emblem2" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="UFF emblem" usemap="#homemap" />

이제이 잘 작동 ...하지만 이미지의 투명한 부분에 마우스를 가져 때에 만, 그리고 내가 원하는 :

이

어떤 컨텍스트에 대한 코드입니다 달성하는 것은 정반대입니다.

Answer 1

확대하려는 이미지의 크기를 변형 해보십시오. 이 같은 :

.emblem { 
 
    width: 200px; 
 
    height: 200px; 
 
    opacity: 0.9; 
 
    position: relative; 
 
    -webkit-transition: all 200ms ease-in; 
 
    -webkit-transform: scale(1); 
 
    -ms-transition: all 200ms ease-in; 
 
    -ms-transform: scale(1); 
 
    -moz-transition: all 200ms ease-in; 
 
    -moz-transform: scale(1); 
 
    transition: all 200ms ease-in; 
 
    transform: scale(1); 
 
} 
 
.emblem:hover{ 
 
    -webkit-transition: all 200ms ease-in; 
 
    -webkit-transform: scale(1.5); 
 
    -ms-transition: all 200ms ease-in; 
 
    -ms-transform: scale(1.5); 
 
    -moz-transition: all 200ms ease-in; 
 
    -moz-transform: scale(1.5); 
 
    transition: all 200ms ease-in; 
 
    transform: scale(1.5); 
 
}

<img class="emblem" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="UFF emblem" usemap="#homemap" />

Answer 2

사용 CSS 다음 '+'선택에

.img-box { 
 
    cursor: pointer; 
 
    height: 110px; 
 
    position: relative; 
 
    width: 110px; 
 
} 
 
.img-link { 
 
    color: #000; 
 
    text-decoration: none; 
 
} 
 
.img-link a, 
 
.img-link a:active, 
 
.img-link a:focus, 
 
.img-link a:hover { 
 
    border-color: transparent; 
 
    color: #000; 
 
    text-decoration: none; 
 
} 
 
.fa-hover { 
 
    bottom: 0; 
 
    font-size: x-large; 
 
    position: absolute; 
 
    right: 0; 
 
} 
 
.fa-hover:hover + .emblem { 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 
.emblem { 
 
    height: 75px; 
 
    width: 75px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="img-box"> 
 
    <a class="img-link" href="https://www.google.ca" target="_window"> 
 
    <div class="fa-hover"> 
 
     <span class="fa fa-plus"></span> 
 
    </div> 
 
    <img class="emblem" src="https://lh3.ggpht.com/A0x3jzuH1qRkE10HcTiT4qQr_6iAqVg-CTsoIqxnoIFyv92V91WI3KqiVlOvLtfoMRg=w300" /> 
 
    </a> 
 
</div>

이

단점에 당신의 호버링 위되어야하는 요소이다 'img'태그가 있지만 CSS가있는 아이콘은 이동할 수 있습니다.