現在サイトを模写しています。(該当サイト→ https://demo.tcd-theme.com/tcd050/ )
その中で「絶景の湯宿。美味に舌鼓。全国おすすめ温泉地特集!」の部分の実装方法がイマイチ理解できていないので解説をして頂きたいです。
現在わかっていること
- 画像をhoverしたら横から文字が表示される。
- 文字と画像に対してposition: abusolute;が使用されていること。それによって表示位置を変えている?
- 元々は大きな画像をoverflow: hidden;で隠している?
- hoverのクラスの付け替えで表示・非表示を選択している。
わかっていないこと
- 文字の出てくる仕組み
- overflowがどのような役割をしているのか?(display: none;)だけではだめ?
検証ツールでスタイルをいじったりしてみていたのですが、コード自体が複雑なのでわからずお聞きした次第です。
お手数ですが、ご回答よろしくお願い致します。