CSS：鼠标悬停改变图像的位置和大小

我想为我的网站做一个按钮菜单，我有一个与鼠标悬停的图像位置问题。这是我创建的目前为止http://jsfiddle.net/tNLUx/CSS：鼠标悬停改变图像的位置和大小

在鼠标悬停时，我希望选定的图像增长，其他图像与第一个图像保持相同的位置...如何使向下图像生长并移动而不是向上移动？

下面是一些我的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; 
}

感谢您的时间

干杯

来源

2013-02-20 iniestar

使用CSS transform: scale(x, y);。例如：

.btn-social { 
 
    width: 100px; 
 
    position: relative; 
 
    opacity: 0.5; 
 
    transition: 0.3s ease; 
 
    cursor: pointer; 
 
} 
 

 
.btn-social:hover { 
 
    transform: scale(1.5, 1.5); /** default is 1, scale it to 1.5 */ 
 
    opacity: 1; 
 
}

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

来源

2013-02-20 03:23:49 nvl

耶变换：大规模结果相当不错，问题是我不能让其他图像改变他们的位置与规模对象 – iniestar 2013-02-20 15:42:56

入住这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; 

}

来源

2013-02-20 04:01:01 999k

，给出了我想要的效果，但我无法控制没有位置的图像初始位置：相对 – iniestar 2013-02-20 15:44:47

CSS：鼠标悬停改变图像的位置和大小

回答

相关问题