Demo

You can click on the deepslate diamond ore to mine it. The one on the right is the "debug" one, to help visualize what is happening.

How it Works

Every block is its own div. The class name is whatever block is being displayed. For example, the Deepslate Diamond Ore in the demo above has the class name of diamond-deepslate.

Every layer of blocks is stored in a div with the class name layer.

What the .layer > * is doing is modifying the style of every child in the .layer. This lets you simplify the css rules for all of the blocks to a single line of code, defining the background-image.

.layer > * {
width: 6.25%;
aspect-ratio: 1/1;
background-size: cover;
background-position: center;
}
.diamond-deepslate {
background-image: url("/path/to/diamond-deepslate.png")
}
.example-block {
background-image: url("/path/to/image.png")
}

The block breaking textures are are img tags stretched across the whole div.