同时具有两种不同背景颜色的CSS悬停网格框

Question

我想悬停我的网格框，其中包括一个图像部分以及描述。问题在于他们的背景。我为这个框提供了两个独立的背景，因为描述部分的特点是一个不同的背景。

如果我悬停它，背景改变到各处，变成一种颜色，这是我在代码中设置的。

我的代码如下所示：

null

.grid1 {
  background: #fdfdfd;
  height: 300px;
  cursor: pointer;
  border: 1px white solid;
  transition: border 0.5s;
}

.grid1:hover {
  border: 1px solid black;
  background-color: #f9fafc;
}

.grid1 img {
  width: 98%;
  height: 275px;
  object-fit: contain;
  filter: brightness(99.3%);
  margin-left: 1%;
  filter: blur(1px) grayscale(1) opacity(75%);
}

.grid1:hover img,
.grid1:hover .companyname {
  filter: none;
  filter: brightness(99.3%);
  color: black;
  background: steelblue;
}

<div class="grid1">
  <img src="https://via.placeholder.com/1920x1080.jpg">
  <div class="companyname">
    <p>us</p>
  </div>
</div>

null

和下面的结果：

我想为我的整个框保留白色背景，只改变描述背景。我如何在CSS中做到这一点？

Answer 1

不确定你的描述是不是指下面的“我们”文本，但如果是这样的话，我想你想要这样的东西：

null

.grid1 {
  text-align: center;
  width: 80%;
}

.companyname {}

.companyname:hover {
  background-color: black;
  color: white;
}

<div class="grid1">
  <img src="https://via.placeholder.com/150" />
  <div class="companyname">
    <p>Company</p>
  </div>
</div>