jquery - css背景缩放效果淡入淡出

Question

从这里使用以下放大效果https://codepen.io/dragoeco/pen/ibrzK

需要一些帮助来使背景图像在悬停时淡入并具有缩放效果，就像这里的一样 http://fantasy.co/work保持前景 Logo 相同。

.image-box{
  width:300px;
  overflow:hidden;
}
.image {
	width:300px;
  height:200px;
	background: url("http://lorempixel.com/300/200");
	background-position:center;
	transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
} 
.image:hover {
  transform: scale(1.5);
  -moz-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  -o-transform: scale(1.5);
  -ms-transform: scale(1.5); /* IE 9 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')"; /* IE8 */
   filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand'); /* IE6 and 7 */ 
} 

<div class="image-box">
  <div class="image">
  </div>
</div>  

Answer 1

将悬停从 image 更改为 image-box，在 image-box 内放置一个标签并添加以下 css:

.image-box, .image {
  position: relative;
}
.image:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: red;
  transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
}
.label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 25px;
  font-weight: bolder;
}
.image-box:hover .image:after {
  opacity: 0.5;
}

检查一下，让我知道您的反馈。谢谢!

编辑:

也增加了 image 的过渡时间。 :)

.image-box {
  width: 300px;
  overflow: hidden;
}
.image {
  width: 300px;
  height: 200px;
  background: url("http://lorempixel.com/300/200");
  background-position: center;
  transition: all 10s ease;
  -moz-transition: all 10s ease;
  -ms-transition: all 10s ease;
  -webkit-transition: all 10s ease;
  -o-transition: all 10s ease;
}
.image-box:hover .image {
  transform: scale(1.5);
  -moz-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  -o-transform: scale(1.5);
  -ms-transform: scale(1.5);
  /* IE 9 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')";
  /* IE8 */
  filter: progid: DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand');
  /* IE6 and 7 */
}

.image-box, .image {
  position: relative;
}
.image:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: red;
  transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
}
.label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 25px;
  font-weight: bolder;
}
.image-box:hover .image:after {
  opacity: 0.5;
}

<div class="image-box">
  <div class="image"></div>
  <div class="label">LABEL</div>
</div>