CSS HTML 1大方框将分为4个具有完整背景图像的框，将鼠标悬停在某些框上将更改背景图像

Question

我想制作一个主页，里面只有1个大方框，里面有4个没有边距的小方框。但背景图片覆盖了整个方形框。当将鼠标悬停在某个方形框上时，它将更改整个背景图像。

例如https://www.mdnsonline.com/。该网站分为4个垂直矩形，但我想使其等于4个正方形..有人可以帮忙吗？

非常感谢您..这是我在做的，但似乎并不完美。

body {
  margin: 0;
  padding: 0;
  background: #000;
}

section {
  position: absolute;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

ul {
  width: 100%;
  height: 0%;
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, .2);
  box-sizing: border-box;
  display: flex;
}

ul li {
  list-style: none;
  width: 25%;
}

ul li a {
  display: block;
  top: 0;
  height: 100vh;
}

ul li a:hover {
  color: #000;
}

section img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  transition: 0.5s;
  opacity: 0;
}

ul li:nth-child(1) a+img {
  opacity: 1;
}

ul li a:hover+img {
  opacity: 1;
  z-index: -1;
  animation: animate 20s linear forwards;
}

@keyframes animate {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(2);
  }
}

<section>
  <ul>
    <li>
      <a href="{{ url('/shop') }}"></a>
      <img src="{{ asset('frontend/images/slides/17/slide-03.jpg') }}" alt="">
    </li>
    <li>
      <a href="{{ url('/about-us') }}"></a>
      <img src="{{ asset('frontend/images/slides/17/slide-04.jpg') }}" alt="">
    </li>
    </li>
    <li>
      <a href="{{ url('/contact-us') }}"></a>
      <img src="{{ asset('frontend/images/slides/17/slide-05.jpg') }}" alt="">
    </li>
    <li>
      <a href="{{ url('/') }}"></a>
      <img src="{{ asset('frontend/images/slides/17/slide-06.jpg') }}" alt="">
    </li>
  </ul>
</section>

Answer 1

您最好的选择是从CSS网格开始。我这里只是一个最小的例子，向您展示它如何工作。

<div class="grid">
  <div>
    hi
  </div>
  <div>
    hi
  </div>
  <div>
    hi
  </div>
  <div>
    hi
  </div>

</div>

然后输入您的CSS：

div.grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-gap: 8px;
}

div div {
  height: 100vh;
  background: green;
}

哪个会给您这样的结果：

修改间隙，列数等以达到相同的效果。为了获得背景悬停，请将图像添加到每个div并在悬停时为其赋予“ scale”属性。这应该给您显示的缩放效果。我将更新答案以在以后显示。