Html扩展鼠标悬停

Question

我需要在鼠标悬停元素上进行扩展，该格式不会仅仅移动HTML上方/下方/上方的文本。

这是我需要做的html

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

Answer 1

绝对定位周围的内容，然后在CSS中添加img:hover选择器。 [看到这个小提琴] （https://jsfiddle.net/samando27/03azgrvq/）示例使用div而不是图像，但您只需要更改选择器。下面的代码显示了悬停选择器，但查看了小提琴的位置。

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;
}