[Solved] CSS HTML 1 big square box divide into 4 box with full background image, hover to certain box will change background image [closed]

by


Your best bet is to start with CSS grid. I’ve but together a minimal example here to show you how it would work.

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

</div>

Then for your css:

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

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

Which will give you a result like this:

grid layout

Modify the gap, number of columns etc to achieve the same effect. In order to get the background hover, add an image to each div and give it the ‘scale’ property on hover. This should give you that zoom effect they show off. I’ll update the answer to show this later.

3

solved CSS HTML 1 big square box divide into 4 box with full background image, hover to certain box will change background image [closed]