Overlay grid on responsive image - html

Question

I have a standard image (that is responsive because of bootstap) and would like to overlay a standard grid 5% x 5% on top of it.
I need to pick points on the images and need the grid to be visible as well as the image.
I upload the image via form and it show up in a form location on the html. I would like to know how to add additional css on top it - to get the grid on top it.
See the image below for a sample (I only put 8 grid - but I would like 5% spacing or 10% spacing both x and y).

Answer 1

Using two linear-gradients on pseudo-elements of the div, one on ::before and one on ::after, we can create two simple lines which are then repeated every nth-percent with background-size. The ::after pseudo-element is rotated 90deg to create the horizontal lines. It looks like this:
.grid::before,
.grid::after {
background: linear-gradient(to right, #000 2px, transparent 2px);
background-size: 10%;
}
.grid::after {
transform: rotate(90deg);
}
The two gradients create two intersecting lines which are a percentage size long, like this:
These lines are repeated with the default background-repeat: repeat, which creates a grid, like this:
When the ::before and ::after pseudo elements are placed over the image we get this:
You can create a fixed grid size, using a fixed pixel background-size:
.fixed::before,
.fixed::after {
background-size: 23px;
}
Example
Note how the entire grid is given an outline using box-shadow: inset 0px 0px 0 2px #000; on ::before.
*,
*::before,
::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.grid img {
display: block;
}
.grid {
display: inline-block;
position: relative;
margin: 10px;
vertical-align: top;
}
.grid::before,
.grid::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, #000 2px, transparent 2px);
background-size: 10%;
}
.grid::before {
background-color: rgba(255, 0, 0, 0.56);
box-shadow: inset 0px 0px 0 2px #000;
}
.grid::after {
transform: rotate(90deg);
}
.fixed::before,
.fixed::after {
background-size: 23px;
}
<div class="grid">
<img src="https://dummyimage.com/300x300/ccc" width="300" height="300" />
</div>
<div class="grid">
<img src="https://dummyimage.com/200x200/ccc" width="200" height="200" />
</div>
<div class="grid">
<img src="https://dummyimage.com/100x100/ccc" width="100" height="100" />
</div>
<div class="grid fixed">
<img src="https://dummyimage.com/500x500/ccc" width="500" height="500" />
</div>