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

Posted 2023-03-06

【中文标题】鼠标悬停更改图像位置和大小

【英文标题】：Mouse hover change image position and size

【发布时间】：2013-02-04 23:21:03

【问题描述】：

我正在尝试为我的网站制作一个按钮菜单，但鼠标悬停时图像的位置存在问题。这是我迄今为止创建的http://jsfiddle.net/tNLUx/

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

#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"  id="btnSocial" class="social1" />
<img src="http://img24.imageshack.us/img24/3221/32845401.png"  id="btnSocial" class="social2"/>
<img src="http://img24.imageshack.us/img24/3221/32845401.png"  id="btnSocial" class="social3"/>
<img src="http://img24.imageshack.us/img24/3221/32845401.png"  id="btnSocial" class="social4"/>

【参考方案1】：

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

【讨论】：

是的 transform:scale 结果很好，问题是我不能让其他图像随着缩放对象改变它们的位置

【参考方案2】：

查看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;

【讨论】：

给出了我想要的效果，但我无法控制没有位置的图像初始位置：相对