Question

我有这段代码：

.box1{
background-size:cover !important; 
height:450px;
width:450px;
background-image:url('https://s10.postimg.org/cqrkj63s9/02_preview-veicoli-industriali_800x800.jpg');

}
.box1:hover {
transition: all .5s ease-in-out;
background-size:200% 200% !important; 
background-image:url('https://s10.postimg.org/xcaxotaqx/02_preview-veicoli-industriali_800x800_blu.jpg');
}

https://jsfiddle.net/52eosap0/

但不行。

我只能使用一个带图像背景的div。

帮帮我？

Answer 1

为图像使用2个伪元素

改变时悬停两者的不透明度，一个从1变为0，另一个从0变为1.

背景大小不可动画，而是用比例改变伪的整个维度

＆＃13;

.box1 {
  background-size: cover !important;
  height: 450px;
  width: 450px;
  position: relative;
  overflow: hidden;
}

.box1:before,
.box1:after {
  content: "";
  transition: all 2s ease-in-out;
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  background-size: cover;
}

.box1:before {
  background-image: url('https://s10.postimg.org/cqrkj63s9/02_preview-veicoli-industriali_800x800.jpg');
}

.box1:after {
  opacity: 0;
  background-image: url('https://s10.postimg.org/xcaxotaqx/02_preview-veicoli-industriali_800x800_blu.jpg');
}

.box1:hover:before {
  opacity: 0;
  transform: scale(2);
}

.box1:hover:after {
  opacity: 1;
  transform: scale(2);
}

＆＃13;

<div class="box1">

</div>

＆＃13;

缓慢的背景图像缩放与翻滚在悬停

1 个答案: