图像悬停上的文字叠加不会在我的网格上工作

Question

我想在我的网格中悬停时显示文字而不是图片。我尝试使用w3schools示例，但它根本不适用于我的代码。这是我的代码。此外，我的代码的任何提示或评论表示赞赏。

我的代码中没有任何悬停尝试，我删除了所有尝试，这就是之前的位置。

HTML

<!-- Header Logo -->
    <div class="hlogo">
        <a href="Home">Hidden Listen</a>
    </div>
    <!-- Header Links -->

     <div class="navbar">
        <a href="Home">Home</a>
        <a href="Reviews">Reviews</a>
        <a href="Artists">Artists</a>
     </div>

    <!-- Grid of Home page -->

    <div class="featured">
        <div class="fmain">
            <img src="/img/Album Covers/marvel1.jpg" alt="Album Cover">
            <h1>Text hover shit</h1>
        </div>
        <div class="main1">
            <img src="/img/Album Covers/fantasy.jpg">
        </div>
        <div class="main2">
            <img src="/img/Album Covers/No Dope on Sundays.jpg">
        </div>
        <div class="main3">
            <img src="/img/Album Covers/Scum Tyler.jpg">
        </div>
        <div class="main4">
            <img src="/img/Album Covers/syre.jpg">
        </div>
    </div>

CSS

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

Answer 1

不确定我是否理解你的问题。看起来令人困惑＆＃34;在我的网格中悬停时文本显示而不是图像＆＃34;。但正如你所提到的，你试过w3school，不知怎的，我知道你正在寻找下面的解决方案。在这里，您需要添加一类悬停文本，并需要添加属性。请尝试以下方式，如果这是您想要的或者您正在寻找其他内容，请告诉我。

＆＃13;

＆＃13;

 /*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%;
}
.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
}
.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.fmain:hover .overlay {
  bottom: 0;
  height: 100%;
}

＆＃13;

<!-- Header Logo -->
    <div class="hlogo">
        <a href="Home">Hidden Listen</a>
    </div>
    <!-- Header Links -->

     <div class="navbar">
        <a href="Home">Home</a>
        <a href="Reviews">Reviews</a>
        <a href="Artists">Artists</a>
     </div>

    <!-- Grid of Home page -->

    <div class="featured">
        <div class="fmain">
            <img src="/img/Album Covers/marvel1.jpg" alt="Album Cover">
            <div class="overlay">
            <h1 class="text">Text hover shit</h1>
            </div>
        </div>
        <div class="main1">
            <img src="/img/Album Covers/fantasy.jpg">
        </div>
        <div class="main2">
            <img src="/img/Album Covers/No Dope on Sundays.jpg">
        </div>
        <div class="main3">
            <img src="/img/Album Covers/Scum Tyler.jpg">
        </div>
        <div class="main4">
            <img src="/img/Album Covers/syre.jpg">
        </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

为了使用css进行悬停，有很多方法可以做到这一点

你必须设置文本的显示，然后在元素或类的id上使用:hover就像这个.hoverText:hover然后将display:block;设置为全部。

https://jsfiddle.net/Liamm12/n2w38whv/

.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;
}
.hoverText{
    display:none;
    position: absolute;
    top: 10%;
    font-size: 28px;
    left: 15%;
    color: #fff;
    transition: all 0,3s ease;
}
.hoverText:hover{
  display: block;
}



.fmain img {
    width: 100%;
}
.fmain img:hover   ~ .hoverText {
    display:block;
}


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

<!-- Header Logo -->
    <div class="hlogo">
        <a href="Home">Hidden Listen</a>
    </div>
    <!-- Header Links -->

     <div class="navbar">
        <a href="Home">Home</a>
        <a href="Reviews">Reviews</a>
        <a href="Artists">Artists</a>
     </div>

    <!-- Grid of Home page -->

    <div class="featured">
        <div class="fmain">
            <img src="http://cdn.pcwallart.com/images/universe-wallpaper-3d-wallpaper-2.jpg" alt="Album Cover">
            <h1 class="hoverText">Text hover shit</h1>
        </div>
        <div class="main1">
            <img src="/img/Album Covers/fantasy.jpg">
        </div>
        <div class="main2">
            <img src="/img/Album Covers/No Dope on Sundays.jpg">
        </div>
        <div class="main3">
            <img src="/img/Album Covers/Scum Tyler.jpg">
        </div>
        <div class="main4">
            <img src="/img/Album Covers/syre.jpg">
        </div>
    </div>

Answer 3

  .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---- */

.grid{
      width:100%;
      position:relative;
      overflow:hidden;
      list-style-type: none;
      margin-left:120px;
}


.griditem .gridhover{
      transform: scaleY(1);
 }

.griditem{
    max-width:100%;
    height:auto;
    position:relative;
    float:left;
    width: 200px;
    margin: 0 0 10px 10px;
}

.gridhover{
    position:absolute;
    width:100%;
    height:100%;
    top:0%;
    transform: translateY(-50%);
    z-index: 2;
    opacity:0;
    text-align: center;
    -webkit-transition:all 0.3s ease-in;
    -moz-transition:all 0.3s ease-in;
    -o-transition:all 0.3s ease-in;
    transition:all 0.3s ease-in;
    background: grey;
    

}
.gridhover:hover{
    opacity: 0.96;

}
.gridhover h{
    font-size:30px;
    width: 100%;
    position:absolute;
    font-weight:700;
    line-height: 50px;

}
.gridhover p{
    font-size:20px;
    position:absolute;

}
.grid img{
    width: 100%;
}

    
    

<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>
<!-- Header Logo -->
    <div class="hlogo">
        <a href="Home">Hidden Listen</a>
    </div>
    <!-- Header Links -->

     <div class="navbar">
        <a href="Home">Home</a>
        <a href="Reviews">Reviews</a>
        <a href="Artists">Artists</a>
     </div>
 <ul class="grid">
            
            <li class="griditem">
            <img src="https://helloworld.co.nz/images/helloworld-logo.jpg" alt="Album Cover">
              <a class="link" href="https://www.google.co.uk/search?q=hello&oq=hello&aqs=chrome..69i57j0l5.703j0j7&sourceid=chrome&ie=UTF-8">
                <div class="gridhover" id="marvel1">
                   <h1>Text hover shit</h1>
                </div>
              </a>
            </li>
            
            
            
             <li class="griditem">
            <img src="https://s-media-cache-ak0.pinimg.com/originals/9c/b7/ea/9cb7ea4872cf0622377402694c26228a.jpg" alt="Album Cover">
              <a class="link" href="https://www.google.co.uk/search?q=hello&oq=hello&aqs=chrome..69i57j0l5.703j0j7&sourceid=chrome&ie=UTF-8">
                <div class="gridhover" id="marvel1">
                   <h1>Text hover shit</h1>
                </div>
              </a>
            </li>
  </ul>
</body>
</html>

首先，我会使用网格列表，因为它可以使编写CSS变得更加容易，因为您可以对所有网格项使用相同的CSS。

如果网格图像的大小不同，您可以在每个网格项上添加一个唯一的Id标记，以进行轻微的尺寸修改：

   <li class="griditem" id="special_item">

这种格式可以节省您的时间并且更容易处理 HTML格式：

      <ul class="grid">

        <li class="griditem">
        <img src="/img/Album Covers/marvel1.jpg" alt="Album Cover">
          <a class="link" href="projects/something/something.php">
            <div class="gridhover" id="marvel1">
               <h1>Text hover shit</h1>
            </div>
          </a>
        </li>

以这种方式扩展更容易，即使不是这种情况，您也希望在语义上正确。

在此方案中使用div上的列表有助于Google Robot，屏幕阅读器以及互联网的盲人用户。