Question

我有一系列带有背景图像的响应框，我正在尝试将鼠标悬停在其上。我希望它悬停时具有文本/图像和彩色背景。悬停时，背景图像仍应可见，但带有带有文字和徽标的彩色覆盖。

我不想使用JS，我知道有一种CSS方式可以做到这一点，但是我似乎无法使其与我所拥有的完全兼容。我已经以这种方式设置了框，以确保它们具有响应能力-也许有更好的方法可以做到这一点？

.matrix{
     display:block;
     overflow:hidden;
}
 .matrix .item{
     float:left;
     width:25%;
     position:relative;
}
 .matrix .item a, .matrix .item.team{
     display:block;
     position:relative;
     overflow:hidden;
}
 .matrix .item img{
     display:block;
     transition:all 0.3 ease;
     width:100%;
}
 .matrix .bleed-in{
     position:absolute;
     right:150%;
     top:-150%;
     width:150%;
     height:300%;
     transition:all 0.35s ease 0.1s;
     z-index:5;
     opacity:0.9;
     transform:rotate(30deg);
}
 .matrix .item .overlay{
     display:block;
     transition:all 0.25s ease 0.1s;
     position:absolute;
     leftL0;
     top:-10px;
     width:100%;
     height:100%;
     opacity:0;
     text-align:center;
     padding:0 10%;
     z-index:9;
}
 .vertical-align{
     position:relative;
     top:50%;
     transform:translateY(-50%);
}
 .matrix .item .overlay img{
     max-height:70px;
     width:auto;
     opacity:1;
     display:inline-block;
     margin: 0 auto 25px;
     transform:none;
}
 .matrix .item h3{
     color:#fff;
     margin:0 0 6px;
     font-size:20px;
     font-weight:500;
}
 .matrix .item p{
     color:#fff;
     margin:0;
     text-transform:uppercase;
     font-size:1.6rem;
}
 @media screen and (max-width:600px){
     .matrix .item{
         width:100%;
         float:none;
    }
}
 @media screen and (max-width:1024px){
     .matrix .item{
         width:50%;
    }
}

<section class="matrix bkg-grey">
   <article class="item" style="background-color: #0058cf">
      <a href="#">
         <img src="https://via.placeholder.com/300.png/09f/fff" alt="">
         <div class="bleed-in" style="background-color: #0058cf"></div>
         <div class="overlay">
            <div class="vertical-align">
               <img src="https://via.placeholder.com/300.png/09f/fff">
               <h3>1</h3>
               <p>Branding &amp; Strategy</p>
            </div>
         </div>
      </a>
   </article>
   <article class="item" style="background-color: #0058cf">
      <a href="#">
         <img src="https://via.placeholder.com/300.png/09f/fff" alt="">
         <div class="bleed-in" style="background-color: #0058cf"></div>
         <div class="overlay">
            <div class="vertical-align">
               <img src="https://via.placeholder.com/300.png/09f/fff">
               <h3>1</h3>
               <p>Branding &amp; Strategy</p>
            </div>
         </div>
      </a>
   </article>
   <article class="item" style="background-color: #0058cf">
      <a href="#">
         <img src="https://via.placeholder.com/300.png/09f/fff" alt="">
         <div class="bleed-in" style="background-color: #0058cf"></div>
         <div class="overlay">
            <div class="vertical-align">
               <img src="https://via.placeholder.com/300.png/09f/fff">
               <h3>1</h3>
               <p>Branding &amp; Strategy</p>
            </div>
         </div>
      </a>
   </article>
   <article class="item" style="background-color: #0058cf">
      <a href="#">
         <img src="https://via.placeholder.com/300.png/09f/fff" alt="">
         <div class="bleed-in" style="background-color: #0058cf"></div>
         <div class="overlay">
            <div class="vertical-align">
               <img src="https://via.placeholder.com/300.png/09f/fff">
               <h3>1</h3>
               <p>Branding &amp; Strategy</p>
            </div>
         </div>
      </a>
   </article>
</section>

我尝试添加一个带有覆盖层的容器，但是它也不起作用。

 .container {
     position: relative;
     height:483px;
     width:555px;
     background-image:url("https://via.placeholder.com/300.png/09f/fff");
     background-size:cover;
     background-repeat:no-repeat;
}
 .overlay {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     height: 100%;
     width: 100%;
     opacity: 0;
     transition: .5s ease;
     background-color: rgba(0,40,80,0.8);
}
 .container:hover .overlay {
     opacity: 1;
}

Answer 1

首先，您的代码混乱。缩进不正确，并且有很多不必要的代码。我想发表此评论，但我的声誉还不够。

此操作不起作用，因为 .overlay 应该是图片的同级，相对于其父级（ .container ）绝对定位。因此，当您将鼠标悬停在其上时，容器将显示最初隐藏在其中的内容。

<div>
    <!-- first item -->
    <div class="container">
        <img src="https://via.placeholder.com/300.png/09f/fff" alt="">
        <div class="overlay">
            <p>Content here</p>
        </div>  
    </div>

    <!-- second item -->
    <div class="container">
        <img src="https://via.placeholder.com/300.png/09f/fff" alt="">
        <div class="overlay">
            <p>Content here</p>
        </div>  
    </div>
</div>

这就是CSS的样子。

.container {
    width: 300px;
    height: 300px;
    position: relative;
    display: inline-block;
}
.overlay {
    position: absolute;
    opacity: 0;
    transition: .5s ease;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.container:hover .overlay {
    opacity: 0.8;
    background: #fff;
}

悬停时颜色叠加-带有文字

1 个答案: