指定部分をホバーした際に画像の大きさはそのままで文字を表示させたい

まず、参考にしたサイトの動きを観察してみます。

ページ開いた直後は下記のようにと表示されていて各要素は親要素の25%の幅になってます。
[画像1][テキスト1][画像2][画像3]

[画像2]にmouseenterすると下記のように変化します。
[画像1][画像2][テキスト2][画像3]

[画像3]にmouseenterすると下記のように変化します。
[画像1][画像2][画像3][テキスト3]

変化するのはmouseenterの時のみで、mouseleaveの時は変化はありません。
ということから、jsのイベントはmouseenterのみでいいと分かります。

デベロッパーツールでHTMLの変化を見てみると、
mouseenterの時に、ホバーした要素にshow_infoクラスが追加されて、それ以外の要素からshow_infoクラスされています。

上記のことからコードは下記のようにすればいいでしょう。

js

1document.addEventListener("DOMContentLoaded", function () {2 document.querySelector(".test-red").classList.add("test-green");3 const tests = document.querySelectorAll(".test-red");4 tests.forEach(function (test) {5 test.addEventListener("mouseenter", function () {6 tests.forEach(function (test) {7 test.classList.remove("test-green")8 });9 test.classList.add("test-green");10 });11 });12});

あとは、CSSでレイアウトを決めればいいです。
解説するとながくなるので、サンプルを置いておきますので研究してみてください。

CodePenサンプル