Here is the code snippet that I am currently working with:
<div id="images" class="img"/>
<img src="spiderman.png" alt=""/>
<img src="superman.png" alt="" height="25%" width="25%"/>
<img src="batman.png" alt="" />
</div>
CSS
.img {
position: absolute;
right: 15%;
top: 30%;
display: flex;
flex-direction: column;
align-items: flex-end;
.img2 {
box-shadow: 0px 0px 5px #fff;
position: absolute;
right: 15%;
top: 30%;
display: flex;
flex-direction: column;
align-items: flex-end;
}
JavaScript
(function() {
function keyDown(event) {
if (event.keyCode == 65) {
if (document.getElementsByClassName("img").length > 0) {
document.getElementsByClassName("img")[0].className = "img2"
} else {
document.getElementsByClassName("img2")[0].className = "img"
}
}
}
document.addEventListener('keydown', keyDown);
})();
This arrangement displays three images in a column, and when the 'a' key is pressed, it highlights them. The issue I am facing is that the column appears never-ending, and I am unsure how to address this problem.