Html 鼠标悬停更改图像位置和大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14971697/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Mouse hover change image position and size
提问by iniestar
I'm trying to do a button menu for my web site and I have an issue with the position of the image on mouse hover. This is what I have created so far http://jsfiddle.net/tNLUx/
我正在尝试为我的网站制作一个按钮菜单，但我在鼠标悬停时图像的位置有问题。这是我迄今为止创建的http://jsfiddle.net/tNLUx/
On mouseover, I want the selected image to grow and the other ones keep their same position just like the first image... how do I make the down images to grow and move down instead of moving up?
在鼠标悬停时，我希望选定的图像增长，而其他图像保持与第一张图像相同的位置......我如何使向下的图像增长并向下移动而不是向上移动？
#btnSocial {
width:100px;
position: relative;
opacity: 0.5;
-webkit-opacity: 0.5;
-moz-opacity: 0.5;
transition: 0.5s ease;
-webkit-transition: 0.5s ease;
-moz-transition: 0.5s ease;
}
#btnSocial:hover{
width: 150px;
opacity: 1;
-webkit-opacity: 1;
-moz-opacity: 1;
}<img src="http://img24.imageshack.us/img24/3221/32845401.png" alt="img1" id="btnSocial" class="social1" />
<img src="http://img24.imageshack.us/img24/3221/32845401.png" alt="img1" id="btnSocial" class="social2"/>
<img src="http://img24.imageshack.us/img24/3221/32845401.png" alt="img1" id="btnSocial" class="social3"/>
<img src="http://img24.imageshack.us/img24/3221/32845401.png" alt="img1" id="btnSocial" class="social4"/>回答by novalagung
Use transform: scale(x, y)to scale the object.
Use transform: translate(x, y)to move the object.
Those two properties can also be combined: transform: scale(x, y) translate(x, y).
使用transform: scale(x, y)缩放对象。
使用transform: translate(x, y)移动的对象。
这两个属性也可以组合：transform: scale(x, y) translate(x, y).
Example:
例子：
.btn-social {
width: 100px;
position: relative;
opacity: 0.5;
transition: 0.3s ease;
cursor: pointer;
}
.btn-social:hover {
opacity: 1;
/** default is 1, scale it to 1.5 */
transform: scale(1.5, 1.5);
/** translate 50px from left, and 40px from top */
/** transform: translate(50px, 40px); */
/** combine both scale and translate */
/** transform: scale(1.5, 1.5) translate(50px, 40px); */
}<img src="http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=c78bd457575a" class="btn-social" />
<img src="http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=c78bd457575a" class="btn-social" /><br />
<img src="http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=c78bd457575a" class="btn-social" />
<img src="http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=c78bd457575a" class="btn-social" />回答by 999k
Check this http://jsfiddle.net/tNLUx/11/
检查这个http://jsfiddle.net/tNLUx/11/
Removed position: relative;from css
position: relative;从 css 中删除
#btnSocial{
width:100px;
opacity: 0.5;
-webkit-opacity: 0.5;
-moz-opacity: 0.5;
transition: 0.5s ease;
-webkit-transition: 0.5s ease;
-moz-transition: 0.5s ease;
}
