前面にテキストを上にしてホバーの背景を拡大（スケールアップ）

ユーザーが画像にマウスを置くと、画像が大きくなります。しかし、私はまた、画像の前にいくつかの情報を表示する必要があります。前面にテキストを上にしてホバーの背景を拡大（スケールアップ）

これは私がこれまで何をやったかである：画像上のユーザホバー、（米国のテキストABOUT）情報も大きくなっているとき

.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を拡張する必要はありません。

一つの方法は、私はこれについてあなたの意見を知ってみましょうスケール係数1/1.1 = 0.909

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

と規模にh2を逆にすることです。乾杯！

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

Jsbin link

CSSに

-webkit-transform: scale(1.1)

の値を下げるチェックし期待しているしている

.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

前面にテキストを上にしてホバーの背景を拡大（スケールアップ）

答えて

関連する問題