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