CSS背景放大效应

Question

从这里https://codepen.io/dragoeco/pen/ibrzK

有效使用以下缩放需要得到一个背景图像淡入与变焦效果悬停喜欢这里的一个http://fantasy.co/work保持前景标志相同的一些援助。

.image-box{ 
 
    width:300px; 
 
    overflow:hidden; 
 
} 
 
.image { 
 
\t width:300px; 
 
    height:200px; 
 
\t background: url("http://lorempixel.com/300/200"); 
 
\t background-position:center; 
 
\t 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-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>

Answer 2

.image-box{ 
 
    width:300px; 
 
    overflow:hidden; 
 
} 
 
.image { 
 
\t width:300px; 
 
    height:200px; 
 
\t background: url("http://lorempixel.com/300/200"); 
 
\t background-position:center; 
 
\t 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); 
 
}

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

我不敢肯定，如果这是你在找什么，但得到一个尝试，如果它没有生病重做我的代码;

首先相对位置添加到您的类图像配

.image {position: relative;} 

再补充一点：从image

.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); 
    }