在盘旋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%;
}