在盘旋div时移动背景图像

Question

有关如何完成包含仅在悬停时可见的背景图像的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>

Answer 1

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

1. 建议您在基类中定义转换，而不是:hover或其他更改伪类。
2. 在基类本身的元素上指定背景。
3. 只需在: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%;
}

Answer 2

你可以试试这个例子：

http://jsfiddle.net/3q9ex/

background-position: -100px center;

玩这个：

background-size: cover;

Answer 3

还可以选择使用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%;
  }
}