Inconsistent positioning of elements across document - html

Question

On this page of the document, I need the images to be arranged messily on the page. My approach is to adjust each one via top and left percentage values. The figure elements are behaving strangely. #num1 does not respond to top at all, while #num4 requires extreme values to function, but #num5 is doing just fine. All 6 #num have the same properties. 1-3 are under <div id="divA" class="row"> while 4-6 are under <div id="divB" class="row">
Here is a link to my CodePen .
http://codepen.io/WallyNally/pen/QEZKrV
Here is the mockup I am working toward.
If you have insight as to why these figures are being difficult, or if you have alternative/improved ways of doing this, please let me know.
Also- once these are arranged, I plan to add script will .on(mouseover) push the non-hoveredfigures away from the hovered element. If there is a way of writing the html/css that would be amenable to being handled by script, bonus points for you.

Answer 1

I created example here which do not change format of boxes and images.
So, first image will have still the same format: 3:2.
box(es) are positioned absolutely to document (topleft corner), width is also calculated from document size.
box-border(s) create right format of boxes.
image-wrapper(s) create position for images - and it should be positioned over the hidden corner.
image-size(s) create right format of images
img use object-fit, which is not compatible with all browsers. If you are looking for for something, what will work on every modern browser, you can use background css style. There is also nice workaround, if you also need img tag for SEO (find Solution 2): Is there an equivalent to background-size: cover and contain for image elements?
#boxes-wrapper {
position: relative;
width: 100%;
padding-top: 63.12%;
}
#box1,
#box2,
#box3,
#box4,
#box5,
#box6 {
position: absolute;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 0;
}
.box-border {
position: absolute;
top: 0;
left: 0;
width: 100%;
-webkit-box-shadow: 0 0 0 2px #5f2325;
-moz-box-shadow: 0 0 0 2px #5f2325;
-ms-box-shadow: 0 0 0 2px #5f2325;
-o-box-shadow: 0 0 0 2px #5f2325;
box-shadow: 0 0 0 2px #5f2325;
}
.image-wrapper {
position: absolute;
height: 0;
}
.image-size {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
}
.image-size img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
#box1 {
top: 21.48%;
left: 4.88%;
width: 24.54%;
}
#box1 .box-border {
padding-top: 67.96%;
}
#box1 .image-wrapper {
bottom: -2.5%;
left: -3.05%;
width: 92.52%;
}
#box1 .image-size {
padding-top: 66.46%;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
#box2 {
top: 31.36%;
left: 36%;
width: 19%;
}
#box2 .box-border {
padding-top: 67.8%;
}
#box2 .image-wrapper {
top: -7.85%;
left: -10.68%;
width: 92.52%;
}
#box2 .image-size {
padding-top: 66.54%;
}
#box4 {
top: 54.67%;
left: 1.42%;
width: 24.61%;
}
#box4 .box-border {
padding-top: 67.77%;
}
#box4 .image-wrapper {
bottom: -11.38%;
left: 10.74%;
width: 66.94%;
}
#box4 .image-size {
padding-top: 104.12%;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
<div id="boxes-wrapper">
<div id="box1">
<div class="box-border">
<div class="image-wrapper">
<div class="image-size">
<img src="http://dummyimage.com/450x300/eee/333333.png" />
</div>
</div>
</div>
</div>
<div id="box2">
<div class="box-border">
<div class="image-wrapper">
<div class="image-size">
<img src="http://dummyimage.com/450x300/eee/333333.png" />
</div>
</div>
</div>
</div>
<div id="box4">
<div class="box-border">
<div class="image-wrapper">
<div class="image-size">
<img src="http://dummyimage.com/450x469/eee/333333.png" />
</div>
</div>
</div>
</div>
</div>
EDIT: Added boxes-wrapper, because of problem with 2nd row.