Question

我尝试将悬停效果放在CSS网格内的图像上，但无法正确放置。在图像上滚动时会出现问题。

悬停效果显示在网格上方。我希望将鼠标悬停在适当的图像上。我查看了数百篇文章，但是由于某种原因，我看不到问题所在。我已经尝试仅使用CSS来解决此问题，并且希望仅使用CSS来解决它，但是我愿意提出建议。

有人可以帮助我解决我做错的事情吗？您能提供的任何帮助将不胜感激。感谢您的帮助！

我提供了指向我的Codepen的链接： https://codepen.io/sktorres/pen/NoBZQV

下面是我编码的CSS和保存网格的主包装器：

    .wrapper{
      display:grid;
      grid-template-columns: auto;
      grid-template-rows: auto 30% 40% auto auto;
      grid-template-areas:
      "hd"
      "hero  "
      "casestudies"
      "contact"
      "ft";
    }
    /* case studies */
    .casestudies {
      align-items: stretch;
      display:grid;
      grid-area: casestudies;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: auto auto;
      justify-self: stretch;
      margin:0;
    }
    .work{
    	background-color:#F4FAFF;
      grid-column: span 3;
    	height: auto;
      padding: 1rem;
      margin:0;
    }
    .work h2{
    	color: #333745;
    	font-size: 3rem;
    	font-weight:300;
    	text-align: center;
    }

    .content .content-overlay {
      background: rgba(0,0,0,0.7);
      position: absolute;
      width: 100%;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      opacity: 0;
      margin:0;
      padding:0;
      -webkit-transition: all 0.4s ease-in-out 0s;
      -moz-transition: all 0.4s ease-in-out 0s;
      transition: all 0.4s ease-in-out 0s;
    }

    .content:hover .content-overlay{
      opacity: 1;
    }

    .content-image{
      width: 100%;
      height:100%;
    }
    .content-details {
      position: absolute;
      text-align: center;
      padding: 0 1rem;
      width: 100%;
      top: 40%;
      left: 50%;
      opacity: 0;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      -webkit-transition: all 0.3s ease-in-out 0s;
      -moz-transition: all 0.3s ease-in-out 0s;
      transition: all 0.3s ease-in-out 0s;
    }

    .content:hover .content-details{
      top: 50%;
      left: 50%;
      opacity: 1;
    }

    .content-details h2{
      color: #F4FAFF;
      font-weight: 100;
      margin-bottom: 0.5rem;
    }

    .content-details p{
      color: #F4FAFF;
      font-size: 1rem;
    }

    .fadeIn-bottom{
      top: 80%;
    }

And this is the html to call up my CSS:

    <div id="wrapper">					
    <!-- Work -->
    <div class="work">
    <h2>Case Studies</h2>
    </div>
    <section id="casestudies" class="casestudies">
    <article class="content">
    <a href="autoshow.html">
    <div class="content-overlay"></div>
    <img class="content-image" src="https://images.unsplash.com/photo-1433360405326-e50f909805b3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=359e8e12304ffa04a38627a157fc3362" alt="" />
    <div class="content-details fadeIn-bottom">
    <h2 class="content-title">kbb.com</h2>
    <p class="content-text">New Car Tablet Experience</p>
    </div>
    </a>
    </article>

    <article class="content">
    <div class="content-overlay"></div>
    <img class="content-image" src="https://images.unsplash.com/photo-1433360405326-e50f909805b3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=359e8e12304ffa04a38627a157fc3362" alt="" />
    <div class="content-details fadeIn-bottom">
    <h2 class"content-title">National Association of Realtors</h2>
    <p class="content-text">Onboarding Project</p>
    </div>
    </article>

    <article class="content">
    <div class="content-overlay"></div>
    <img class="content-image" src="https://images.unsplash.com/photo-1433360405326-e50f909805b3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=359e8e12304ffa04a38627a157fc3362" alt="" />
    <div class="content-details fadeIn-bottom">
    <h2 class"content-title">GWR Smart Home</h2>
    <p class="content-text">Mobile App</p>
    </div>
    </article>

    <article class="content">
    <div class="content-overlay"></div>
    <img class="content-image" src="https://images.unsplash.com/photo-1433360405326-e50f909805b3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=359e8e12304ffa04a38627a157fc3362" alt="" />
    <div class="content-details fadeIn-bottom">
    <h2 class"content-title">kbb.com</h2>
    <p class="content-text">Trade In Value</p>
    </div>
    </article>

    <article class="content">
    <div class="content-overlay"></div>
    <img class="content-image" src="https://images.unsplash.com/photo-1433360405326-e50f909805b3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=359e8e12304ffa04a38627a157fc3362" alt="" />
     <div class="content-details fadeIn-bottom">
    <h2 class"content-title">kbb.com</h2>
    <p class="content-text">Website Redesign</p>
    </div>
    </article>

    <article class="content">
    <div class="content-overlay"></div>
    <img class="content-image" src="https://images.unsplash.com/photo-1433360405326-e50f909805b3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=359e8e12304ffa04a38627a157fc3362" alt="" />
    <div class="content-details fadeIn-bottom">
    <h2 class"content-title">TCP Lighting</h2>
    <p class="content-text">Smart Lighting Mobile App</p>
    </div>
    </article>
    </section>

Answer 1

您唯一需要做的就是将包装容器的位置设置为相对。与网格无关，只是所定位的元素是相对于实体的，并计算实体的宽度，高度和位置，而不是其父实体。

您将背景绘制到

.content .content-overlay

将父容器设置为相对容器即可。

.content {
  position: relative;
}

Answer 2

您正在尝试使动画呈现为整个视口的大小。这有点棘手，但是如果您检查控制台，则可以看到动画尝试出现在整个屏幕上。如果将内容类的位置更改为相对位置，这将使动画仅在所需元素上弹出。

CSS网格和图像叠加层

2 个答案: