Html在鼠標上展開

Question

我需要在鼠標上展開一個元素，該元素不會將HTML文件旁邊/下方/上方的文本移出HTML。

這是我需要絕對做到這一點

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

Answer 1

位置周圍的內容，然後img:hover選擇添加到您的CSS的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; 
}