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

Question

実現したいこと

https://demo.tcd-theme.com/tcd050/
の美味に舌鼓。全国おすすめ温泉地特集！という部分のホバーしたらスライドする部分を真似て作成したいと思っております。
自分でコードを作成しているのですが、思ったようにスライドせずぎこちないような動きになってしまっているのでアドバイスをいただきたいです。

発生している問題・分からないこと

• スライドの仕方

実際にスライドをするのですが、画像の大きさをキープしながら移動させる方法がわかりません。大きさを１００％に大きさにしてしまうと画像のスライドだけになってしまうので元々100%から60%に変更するようなコードに変更しているのですが、画像の大きさや表示範囲が中途半端になってしまうのでどうしても変更した際の違和感が否めないので修正したいです。

• jsの付け替え

ソースコードを確認してみてクラスの付け替えだとは思っているのですがそれで大丈夫なのかとホバーした際にコードの変換があっているかどうかお聞きしたいです。

該当のソースコード

<div class="test">
      <div class="test-red">
        <img src="/image/epic/epic-bath-flower.jpeg" alt="">
        <p>テキスト</p>
      </div>
      <div class="test-red">
        <img src="/image/epic/epic-hokkaido.jpeg" alt="">
        <p>タイトル</p>
      </div>
      <div class="test-red">
        <img src="/image/epic/epic-maple.jpeg" alt="">
        <p>表題</p>
      </div>
    </div>

.test{
  overflow: hidden;
  display: flex;
  .test-red{
    position: relative;
    transition: all 0.4s;
    overflow: hidden;
    width: 30%;
    height: 300px;
    transition: all 0.4s;
    &:nth-child(1){
      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      p{
       display: none;
      }
    }
    &:nth-child(2){

      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      p{
       display: none;
      }
    }
    &:nth-child(3){

      img{
        width: 100%;
        height: 100%;
      }
      p{
       display: none;
      }
    }
    &:hover{
      &.test-green{
        height: 300px;
        transition: all .5s;
        img{
          position: absolute;
          left: 0;
          top: 0;
          width: 60%;
          object-fit: cover;
        }
        p{
          display: block;
          position: absolute;
          right: 0;
          top: 0;
          width: 40%;
        }
      }
    }
  }
}

document.addEventListener('DOMContentLoaded', function() {
  const tests = document.querySelectorAll('.test-red');

  tests.forEach(function(test) {
    test.addEventListener('mouseenter', function() {
      test.classList.add('test-green');
    });

    test.addEventListener('mouseleave', function() {
      test.classList.remove('test-green');
    });
  });
});

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

ソースコードや検索で試してみたのですが、クラスの付け替えなどがjsで起きているのはなんとなくわかっているのですが、サイズ変換などはクラスの付け替えで起きているのはわかるのですが、その大きさの指定や画像の大きさをキープしたまま変更する方法（多分padding-topだとは思うのですが・・・）がよくわかっていないです。

補足

特になし

Answer 1

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

ページ開いた直後は下記のようにと表示されていて各要素は親要素の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クラスされています。

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

document.addEventListener("DOMContentLoaded", function () {
  document.querySelector(".test-red").classList.add("test-green");
  const tests = document.querySelectorAll(".test-red");
  tests.forEach(function (test) {
    test.addEventListener("mouseenter", function () {
      tests.forEach(function (test) {
        test.classList.remove("test-green")
      });
      test.classList.add("test-green");
    });
  });
});

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

CodePenサンプル

Comments

[yudai1107]

ありがとうございます！
すごくわかりやすく説明していただいて助かりました。
早速実装できました！

[yudai1107]

ちなみにcqwという単位は%やpxなどに置き換えられるのでしょうか？
調べてみたところあまり推奨される単位ではないのかな？と思った次第なのと自分のわからない単位をわからないまま使用すると怖い部分もあるので、もし可能でしたらお答えいただけますと幸いです。
（自分でもpxや%を使って試してみたのですがどうしても文字の部分が全部はみ出してしまうので修正が必要なのかなと考えています）

[hatena19]

非推奨という情報をどこで得たのかわかりませんが、下記が公式の解説ページです。非推奨という記述はありません。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_containment/Container_queries

最近実装された機能なので古い情報だと非推奨とあるかも知れませんが、今なら全ブラウザ対応しているので使用しても問題ないと思います。

コンテナクエリ @container が全ブラウザ対応。新時代のレスポンシブ対応を完全理解する https://zenn.dev/tonkotsuboy_com/articles/css-container-query

cqwを使わずにとなると、pxで親、子、孫のブロックの幅をすべて固定にするか、画面サイズにあわせて拡縮させるならvwで設定することになります。

参考にしたリンク先では画面幅が1200px以上では固定、ある幅以下では画面幅に応じて拡縮という設計(max-width: 1200px;)になってましたので、画面幅に応じて固定と拡縮を切り替える必要があります。
この場合、いままで、ならメディアクエリを使って切り替えてました。
cqw(コンテナクエリ)を使うと非常にシンプルに記述できますので、これからは積極的に使った方がいいでしょう。

[yudai1107]

ありがとうございます。
完全に私の調べ不足です（チャットGPTで修正しようとした際にそのような記述があったので気になった次第です。）
やはり％ではなくpxやvwを使わないければいけないんですね。
大丈夫だと思うのですがもう少しcqwに関して検索して理解を含めて使用させて頂きます。
ありがとうございました！

Answer 2

https://codepen.io/arcxor/pen/abMGQaz

<div class="items debug">
  <div class="item" tabindex="0">
    <div class="firstContent">
      <img src="https://loremflickr.com/300/300?random=1" alt="">
    </div>
    <div class="secondContent">
      <p>テキスト</p>
    </div>
  </div>
  <div class="item open" tabindex="0">
    <div class="firstContent">
      <img src="https://loremflickr.com/300/300?random=2" alt="">
    </div>
    <div class="secondContent">
      <p>テキスト</p>
    </div>
  </div>
  <div class="item" tabindex="0">
    <div class="firstContent">
      <img src="https://loremflickr.com/300/300?random=3" alt="">
    </div>
    <div class="secondContent">
      <p>テキスト</p>
    </div>
  </div>
</div>

:root {
  --size: 300px;
  --gap: 20px;
}
html, body {
  margin: 0;
}
.items {
  display: flex;
  gap: var(--gap);
}
.item {
  display: flex;
  gap: var(--gap);
  overflow: hidden;
  flex: 0 0 auto;
  width: var(--size);
  transition: all 0.5s ease;
}
.item.open {
  width: calc(var(--size) * 2 + var(--gap));
}
.firstContent, .secondContent {
  overflow: hidden;
  width: var(--size);
  height: var(--size);
  flex: 0 0 auto;
}

.debug.items {
  margin: 20px;
  background: #ccc;
}
.debug :is(.firstContent, .secondContent) {
  position: relative;
}
.debug :is(.firstContent, .secondContent)::after {
  pointer-events: none;
  content: "";
  position: absolute;
  inset: 0;
  border: 4px solid red;
}
.debug .secondContent::after {
  border-color: blue;
}

(function() {
  'use strict';

  function main() {
    const itemList = document.querySelectorAll('.items .item');
    itemList.forEach(item => {
      item.addEventListener('mouseenter', activeItem);
      item.addEventListener('click', activeItem);
      item.addEventListener('keydown', evt => {
        if (evt.key === 'Enter' || evt.key === ' ') activeItem.call(evt.target);
      });
    });
    
    function activeItem() {
      itemList.forEach(item => item.classList.remove('open'));    
      this.classList.add('open');
    }
  }

  document.addEventListener('DOMContentLoaded', main);
}());

Comments

[yudai1107]

回答ありがとうございます。
ベストアンサーは別の方を選ばせていただきましたが、こちらの回答も非常に参考になりました。