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