Currently, I am in the process of creating an animated grid that adjusts its size when hovered over. To view the code pen project, please ensure you are in desktop mode rather than mobile:
https://codepen.io/marco_lu/pen/abBmwEJ
The JavaScript code utilized for the animation is as follows:
$(".home-tile").hover(
function () {
$(this).addClass("col-lg-6");
$(this).siblings().addClass("col-lg-3");
$(".home-tile").removeClass("col-lg-4");
},
function () {
$(this).removeClass("col-lg-6");
$(this).siblings().removeClass("col-lg-3");
$(".home-tile").addClass("col-lg-4");
}
);
Although the current setup functions properly, I have noticed that the animation lags and the tile on the far right does not expand quickly enough to fill the screen (resulting in a visible yellow background). Is there a method to ensure that the rightmost tile sticks to the edge of the screen?
Your help is greatly appreciated.