Question

使用以下https://codepen.io/dragoeco/pen/ibrzK

放大效果

需要一些帮助才能让悬停时的缩放效果让背景图片淡入，就像这里http://fantasy.co/work保持前景徽标一样。

.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的过渡时间。：）

＆＃13;
＆＃13;
.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; }
＆＃13;
<div class="image-box"> <div class="image"></div> <div class="label">LABEL</div> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

＆＃13;

.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;
  position: relative;
} 

.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 */ 
} 

.image:after {
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(255, 0, 0, 0);
  transition: background-color 1s ease;
}

.image:hover:after {
  background-color: rgba(255, 0 ,0 , 0.4);
}

＆＃13;

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

＆＃13;

我不确定这是否是您正在寻找的，但请试一试，如果它没有生病重做我的代码;

首先添加相对于.image类的位置

.image {position: relative;}

然后添加：

.image:after {
      content: '';
      display: block;
      height: 100%;
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background-color: rgba(255, 0, 0, 0);
      transition: background-color 1s ease;
    }

    .image:hover:after {
      background-color: rgba(255, 0 ,0 , 0.4);
    }

css背景缩放与淡入效果

2 个答案: