CSS:鼠标悬停更改图像位置和大小

时间:2013-02-20 03:18:08

标签: html css css3

我正在尝试为我的网站做一个按钮菜单,我在鼠标悬停时出现图像位置问题。这是我到目前为止创建的http://jsfiddle.net/tNLUx/

在鼠标悬停时,我希望所选图像增长,而其他图像保持相同的位置,就像第一张图像一样......如何使向下图像生长并向下移动而不是向上移动?

这是我的一些CSS

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

感谢您的时间

干杯

2 个答案:

答案 0 :(得分:37)

使用transform: scale(x, y)缩放对象。
使用transform: translate(x, y)移动对象。这两个属性也可以合并:transform: scale(x, y) translate(x, y)

示例:

.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" />

答案 1 :(得分:3)

选中此http://jsfiddle.net/tNLUx/11/

从css

中删除position: relative;
#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;

}