懸停背景（放大）與前面的文字不會擴大規模

當用戶懸停在圖像上，圖像變得越來越大。但是我也有一些信息要顯示在圖像前面。懸停背景（放大）與前面的文字不會擴大規模

這是我迄今所做的：

.home-about-link { 
 
    overflow: hidden; 
 
    width: 100%; 
 
} 
 

 
.home-about { 
 
    background: url(https://dummyimage.com/600x400/000/fff) no-repeat center center; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    text-align: center; 
 
    height: 300px; 
 
    width: 100%; 
 
    opacity: 0.8; 
 
} 
 

 
.home-about:hover { 
 
    opacity: 1; 
 
    transform: scale(1.1); 
 
    -moz-transform: scale(1.1); 
 
    -webkit-transform: scale(1.1); 
 
    -o-transform: scale(1.1); 
 
    -ms-transform: scale(1.1); 
 
    /* IE 9 */ 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.1, M12=0, M21=0, M22=1.1, SizingMethod='auto expand')"; 
 
    /* IE8 */ 
 
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.1, M12=0, M21=0, M22=1.1, SizingMethod='auto expand'); 
 
    /* IE6 and 7 */ 
 
} 
 

 
h2 { 
 
    color: #fff; 
 
}

<div class="home-about-link"> 
 
    <div class="home-about"> 
 
    <h2>ABOUT US</h2> 
 
    </div> 
 
</div>

什麼代碼做的是當圖像用戶懸停，信息（約合文本）也挺大。我試圖得到的是信息字體與以前一樣，只有背景放大。有什麼辦法可以做到這一點？

來源

2016-09-18 stackacc

所以，你不想與背景一起縮放h2。

一種方法是反向規模h2用比例因子1/1.1 = 0.909

.home-about:hover h2{ 
    transform: scale(0.909); 
}

讓我知道你對這個意見。乾杯!

.home-about-link { 
 
    overflow: hidden; 
 
    width: 100%; 
 
} 
 
.home-about { 
 
    background: url(https://dummyimage.com/600x400/000/fff) no-repeat center center; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    text-align: center; 
 
    height: 300px; 
 
    width: 100%; 
 
    opacity: 0.8; 
 
} 
 
.home-about:hover { 
 
    opacity: 1; 
 
    transform: scale(1.1); 
 
    -moz-transform: scale(1.1); 
 
    -webkit-transform: scale(1.1); 
 
    -o-transform: scale(1.1); 
 
    -ms-transform: scale(1.1); 
 
    /* IE 9 */ 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.1, M12=0, M21=0, M22=1.1, SizingMethod='auto expand')"; 
 
    /* IE8 */ 
 
    filter: progid: DXImageTransform.Microsoft.Matrix(M11=1.1, M12=0, M21=0, M22=1.1, SizingMethod='auto expand'); 
 
    /* IE6 and 7 */ 
 
} 
 
h2 { 
 
    color: #fff; 
 
} 
 
.home-about:hover h2 { 
 
    transform: scale(0.909); 
 
}

<div class="home-about-link"> 
 
    <div class="home-about"> 
 
    <h2>ABOUT US</h2> 
 
    </div> 
 
</div>

來源

2016-09-18 04:20:10 kukkuz

是這樣的結果是你期待您在jsbin輸出

剛剛的

-webkit-transform: scale(1.1)

值降低到

-webkit-transform: scale(1);

Jsbin link

CSS

.home-about-link{ 
    overflow: hidden; 
    width: 100%; 
} 
.home-about{ 
    background: url(https://dummyimage.com/600x400/000/fff) no-repeat center center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    text-align: center; 
    height: 300px; 
    width: 100%; 
    opacity: 0.8; 
} 
.home-about:hover { 
    opacity: 1; 
    transform: scale(1); 
    -moz-transform: scale(1.1); 
    -webkit-transform: scale(1);<!----check the changes--------> 
    -o-transform: scale(1.1); 
    -ms-transform: scale(1.1); /* IE 9 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.1, M12=0, M21=0, M22=1.1, SizingMethod='auto expand')"; /* IE8 */ 
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.1, M12=0, M21=0, M22=1.1, SizingMethod='auto expand'); /* IE6 and 7 */ 
} 

h2{ 
    color: #fff; 
}

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 
    <div class="home-about-link"> 
     <div class="home-about"> 
     <h2>ABOUT US</h2> 
     </div> 
    </div> 

</body> 
</html>

來源

2016-09-18 04:14:25

懸停背景（放大）與前面的文字不會擴大規模

回答

相關問題