1
グリッドのホバー上にイメージの代わりにテキストを表示しようとしています。私はw3schoolsの例を使ってみましたが、私のコードではうまくいきませんでした。ここに私のコードです。また、私のコードに関するヒントやコメントもありがとうございます。イメージのホバー上のテキストオーバーレイがグリッドで機能しない
私のコードにはホバーの試行はありません。私はすべての試行を削除しました。これは以前の場所です。私はあなたの質問を理解
/*Navigation Bar*/
.hlogo {
text-align: center;
background-color: transparent;
width: 100%;
padding-top: 20px;
}
.hlogo a {
color: #092140;
text-decoration: none;
display: inline-block;
font-size: 50px;
font-family: 'Oswald', sans-serif;
}
.navbar {
background-color: transparent;
overflow: hidden;
text-align: center;
width: 100%;
}
.navbar a {
color: #092140;
text-decoration: none;
display: inline-block;
padding: 15px 10px;
padding-top: 5px;
font-family: 'Oswald', sans-serif;
font-weight: 300;
}
.navbar a:hover {
color:#F24738;
}
/* Grid */
.featured {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 50% 50%;
}
.featured > div {
text-align: center;
}
.fmain {
grid-column: 1/span 2;
grid-row: 1/span 2;
position: relative;
}
.fmain img {
width: 100%;
}
.main1 {
grid-column: 3/span 1;
grid-row: 1;
}
.main1 img {
width: 100%;
}
.main2 {
grid-column: 4/span 1;
grid-row: 1;
}
.main2 img {
width: 100%;
}
.main3 {
grid-column: 3/span 1;
grid-row: 2;
}
.main3 img {
width: 100%;
}
.main4 {
grid-column: 4/span 1;
grid-row: 2;
}
.main4 img {
width: 100%;
}