【问题标题】：Move background image while hovering div悬停div时移动背景图像
【发布时间】：2014-07-20 06:51:50
【问题描述】：

关于如何完成包含仅在悬停时可见的背景图像的 div 的任何建议。并且在悬停时我希望图像放大或移动到两侧。这是我目前的进展。

.seg1 p:first-child {
  font-size: 20px;
  padding: 0;
  margin: 10% 0% 0% 10%;
}

.seg1 p {
  color: #363e3e;
  font-size: 32px;
  margin: 0% 0% 0% 10%;
}

.seg1 p:nth-child(3) {
  color: #ccc;
  font-size: 25px;
  margin: 0% 0% 0% 10%;
}

.seg1 {
  -webkit-border-radius: 400px;
  border: 1px solid #b1ebeb;
  height: 250px;
  width: 250px;
  float: left;
  background-color: #f1fbfb;
}

.seg1:hover {
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  background-image: url(https://via.placeholder.com/350/000000/FFFFFF/?text=BackgroundImage);
}

<div class="seg1">
  <p> test </p>
  <p> dont </p>
  <p> bother </p>


</div>

提前谢谢你。

答案在未来可能会被打破

在这里嵌入一个工作示例。

.seg1 {
  -webkit-border-radius: 400px;
  border: 1px solid #b1ebeb;
  height: 250px;
  width: 250px;
  float: left;
  background-color: #f1fbfb;
}

.seg1:hover {
  animation-duration: 3s;
  animation-name: zoomin;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 3s;
  -webkit-animation-name: zoomin;
  -webkit-animation-fill-mode: forwards;
  background-image: url('https://via.placeholder.com/350/000000/FFFFFF/?text=Background-image');
  background-position: center;
}

@keyframes zoomin {
  from {
    background-size: 100%;
  }
  to {
    background-size: 200%;
  }
}

@-webkit-keyframes zoomin {
  from {
    background-size: 100%;
  }
  to {
    background-size: 200%;
  }
}

<div class="seg1">
  <p>Click</p>
  <p>To send me an email</p>
  <p>For business enquiries</p>
</div>

【问题讨论】：

标签： jquery css hover

【解决方案1】：

演示：http://jsfiddle.net/abhitalks/xE4q4/

建议在基类中定义您的转换，而不是在 :hover 或其他 change 伪类中。
在基类本身的元素上指定背景。
只需在 :hover 伪类中指定您想要的更改。

相关 CSS：

.seg1 {
    border-radius: 50%;
    border: 1px solid #b1ebeb;
    height: 250px; width: 250px;
    text-align: center;
    background: url('your image') no-repeat center center #f1fbfb;
    background-size: 0px;
    transition: all 1s ease-in-out;
}
.seg1:hover {
    background-size: 100%;
}

【讨论】：

【解决方案2】：

还有使用 CSS 动画的选项。支持与 CSS 转换大致相同（http://caniuse.com/css-animation、http://caniuse.com/css-transitions），但代码有点长（主要是因为您还必须添加 -webkit 前缀版本）。

演示：http://jsfiddle.net/32Qrb/3/

相关CSS：

.seg1{
-webkit-border-radius:400px;
border:1px solid #b1ebeb;
height:250px;
width:250px;
float:left;
background-color:#f1fbfb;
}

.seg1:hover{
    animation-duration: 3s;
    animation-name: zoomin;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 3s;
    -webkit-animation-name: zoomin;
    -webkit-animation-fill-mode: forwards;

    background-image:url('http://lorempixel.com/256/256'); 
    background-position: center;
}

@keyframes zoomin {
  from {
      background-size: 100%;
  }

  to {
      background-size: 200%;
  }
}

@-webkit-keyframes zoomin {
  from {
      background-size: 100%;
  }

  to {
      background-size: 200%;
  }
}

【讨论】：

【解决方案3】：

你可以试试这个，例如：

http://jsfiddle.net/3q9ex/

background-position: -100px center;

然后玩这个：

background-size: cover;

【讨论】：