HTML을 통해 마우스를 확장하십시오

Question

HTML만으로/아래/위의 텍스트를 이동하지 않는 요소 위로 마우스를 가져 가야합니다.

이

내가 절대적으로이

<img src="https://media.giphy.com/media/3oEjI4YVeORS9Xqal2/giphy.gif" alt=""style="width:12px;height:18px;"> 

Answer 1

위치를 주변의 내용을 다음 CSS에 img:hover 선택기를 추가하는 데 필요한 HTML입니다. [이 바이올린보기] (https://jsfiddle.net/samando27/03azgrvq/) 이미지 대신 divs를 사용하는 예는 선택기 만 변경하면됩니다. 아래 코드는 호버 선택기를 보여 주지만 위치 지정을 위해 바이올린을 봅니다.

img:hover { 
    // change these to your expand requirements 
    width: 200px; 
    height: 200px; 
} 

Answer 2

이 코드를 추가하면 마우스의 이미지 높이와 너비가 확장됩니다.

HTML,

<div id="img"> 
<img src="#" alt=""> 
</div> 

CSS

#img{ 
width:100px; 
height:100px; 
transition:0.6s ease; 
} 
img{ 
width:100%; 
height:100%; 
} 
#img:hover{ 
width:150px; 
height:150px; 
}