JSFiddle - React, Tailwind, and code Playground

HTML

<div id="imgContain"></div>
	
<!-- ABSOLUTE ELEMENTS -->
<div id="findBottom"></div>
<!-- ABSOLUTE ELEMENTS -->

CSS

body, p, div {
	margin:0;
	padding:0;
}

body {
	
}

#findBottom {
	position:absolute;
	bottom:0;
}

.imgPane {
	float:left;
	background-position:center;
	transition:width 0.25s;
}

#img1 {background-image:url('img/1.jpg');}
#img2 {background-image:url('img/2.jpg');}
#img3 {background-image:url('img/3.jpg');}
#img4 {background-image:url('img/4.jpg');}

JavaScript

var pageHeight = document.getElementById('findBottom').getBoundingClientRect().bottom,
numOfPics = 4;

//creates the div elements within a container div in the HTML document
for (var i = 1; i <= numOfPics; i++) {
	document.getElementById('imgContain').innerHTML += '<div id="img' + i + '" class="imgPane"></div>';
}

//used to resize all divs if the window changes size
window.onresize = function() {
	pageHeight = document.getElementById('findBottom').getBoundingClientRect().bottom;
	for (var i = 1; i <= numOfPics; i++) {
		document.getElementById('img' + i).style.height = pageHeight + 'px';
	}
	for (var i = 1; i <= numOfPics; i++) {
		document.getElementById('img' + i).style.width =  100 / numOfPics + '%';
	}
}

//sets the height of each div to be the mximum height of the page (without scrolling)
for (var i = 1; i <= numOfPics; i++) {
	document.getElementById('img' + i).style.height = pageHeight + 'px';
}

//makes all the divs equal percentage widths
for (var i = 1; i <= numOfPics; i++) {
	document.getElementById('img' + i).style.width =  100 / numOfPics + '%';
}

//the percentage of the page the hovered image will expand to
var expandTo = 40;

//function for when an image is hovered over
function expandCompensate(whichImg) {
	for (var i = 1; i <= numOfPics; i++) {
		if (i != whichImg)
			document.getElementById('img' + i).style.width = (100 - expandTo) / (numOfPics - 1) + '%';
	}
}

//function for when the hovered image is left to reset the widths
function expandReset() {
	for (var i = 1; i <= numOfPics; i++) {
		document.getElementById('img' + i).style.width =  100 / numOfPics + '%';
	}
}

//functions for each image for when hovered over
//this is what I am trying to automate, I don't want to have to write a function for each div element
document.getElementById('img2').onmouseover = function() {
	document.getElementById('img2').style.width = expandTo + '%';
	
	expandCompensate(2);
}

document.getElementById('img2').onmouseout = function()...