0

現在サイトを模写しています。(該当サイト→ https://demo.tcd-theme.com/tcd050/

その中で「絶景の湯宿。美味に舌鼓。全国おすすめ温泉地特集!」の部分の実装方法がイマイチ理解できていないので解説をして頂きたいです。

現在わかっていること

  • 画像をhoverしたら横から文字が表示される。
  • 文字と画像に対してposition: abusolute;が使用されていること。それによって表示位置を変えている?
  • 元々は大きな画像をoverflow: hidden;で隠している?
  • hoverのクラスの付け替えで表示・非表示を選択している。

わかっていないこと

  • 文字の出てくる仕組み
  • overflowがどのような役割をしているのか?(display: none;)だけではだめ?

検証ツールでスタイルをいじったりしてみていたのですが、コード自体が複雑なのでわからずお聞きした次第です。
お手数ですが、ご回答よろしくお願い致します。

1
  • リンク先のページは書き換わってしまう可能性があるため、問題を再現できるような最小限のサンプルコードを質問に含めてもらうと、この質問と回答が今後も役に立つものになると思います。
    – cubick
    Commented 1月23日 2:38

1 件の回答 1

0
  • 2w × h ピクセルのコンテンツを N 個用意します。
    参考サイトでは左半分に画像、右半分にテキストが入っています。
  • それぞれを w × h ピクセルのボックスで囲み、overflow: hidden を指定して右半分を隠します。
  • そのボックスを横並びに配置します。
  • JavaScript で、ポインタが触れたボックスだけを 2w の幅に広げます

コンテンツの右半分を display: none で非表示にした場合、transition によるなめらかな切り替えができません。

document.body.addEventListener('mouseenter', e => {
  if (!e.target.closest('.box'))
    return;
  for (let box of document.querySelectorAll('.box'))
    box.classList.remove('active');
  e.target.closest('.box').classList.add('active');
}, {capture:true});
.container {
  --w: 100px;
  --h: 100px;
  display: flex;
  column-gap: 8px;
}

.box {
  width: var(--w);
  height: var(--h);
  overflow: hidden;
  transition: 0.3s all ease;
}

.box.active {
  width: calc(var(--w) * 2);
}

.contents {
  width: calc(var(--w) * 2);
  height: var(--h);
  background: linear-gradient(to right, blue, lime);
}
<div class="container">
<div class="box"><div class="contents"></div></div>
<div class="box"><div class="contents"></div></div>
<div class="box"><div class="contents"></div></div>
<div class="box"><div class="contents"></div></div>
</div>

1
  • ありがとうございます! 実際にやってみてイメージが湧きました! Commented 1月23日 2:31

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。