CSS:
.images{
    text-align:center;

    border:3px solid #666;
}

.characterImg, .featureImg, .traitImg{
    display:inline-block;

    border:1px solid #CCC;
}

HTML:
<div class = "images" id = "images">
<div class = "characterImg" id="characterImg"></div>
<div class = "featureImg" id="featureImg"></div>
<div class = "traitImg" id="traitImg"></div>
</div>

JAVASCRIPT:
//before button clicked

//this code is repeated three times for each image
{
let characterImage = document.createElement("IMG");
document.querySelector("body").appendChild(characterImage);
characterImage.id = "characterImg";
characterImage.className = "characterImg";
characterImage.src = "Placeholder";
characterImage.style.visibility = "hidden";
}
//When button clicked
function buttonAreaOne(){
document.getElementById("characterImg").src="Game Photos/Henry";
document.getElementById("characterImg").style.visibility = "visible";
}