アコーディオンメニューで画像とテキストの一部を表示させたい。

前提・実現したいこと

父親に急遽頼まれ、今週中にHPを作らなければならなくなり、非常に困っております。
https://www.behance.net/gallery/81858961/ADM-Group
上記のようなアコーディオンメニューで
画像とテキストの一部を表示させ、
マウスオーバーで画像、テキストを全て表示というのを
ワードプレス内で再現したいのですが、
現在固定ページにCSSを追加しており、アコーディオンメニュー内のテキストはマウスオーバーしないと出てこないものになっております。
チュートリアルを見たり、調べながらの初めての作業なので画像とテキストを分けることが出来ません＞＜
こちらのコードに何を追加すれば良いのでしょうか…？
出来ればCSSのみで実装したいです…。

該当のソースコード

CSS
1ソースコード
2```@media(min-width: 768px) {
3.liquid-column1 .elementor-widget-wrap{
4    opacity: 0;
5}
6.liquid-column1:hover .elementor-widget-wrap {
7    transition: opacity 0.4s ease0.2s;
8opacity:1;
9}
10.liquid-column1{
11    height: 500px;
12    overflow: hidden;
13    flex: 1;
14    transition: flex 0.8s ease;
15}
16.liquid-column1:hover{
17    flex:3;
18}
19.liquid-column2 .elementor-widget-wrap{
20    opacity: 0;
21}
22.liquid-column2:hover .elementor-widget-wrap {
23    transition: opacity 0.4s ease0.2s;
24opacity:1;
25}
26.liquid-column2{
27    height: 500px;
28    overflow: hidden;
29    flex: 1;
30    transition: flex 0.8s ease;
31}
32.liquid-column2:hover{
33    flex:3;
34}
35.liquid-column3 .elementor-widget-wrap{
36    opacity: 0;
37}
38.liquid-column3:hover .elementor-widget-wrap {
39    transition: opacity 0.4s ease0.2s;
40opacity:1;
41}
42.liquid-column3{
43    height: 500px;
44    overflow: hidden;
45    flex: 1;
46    transition: flex 0.8s ease;
47}
48.liquid-column3:hover{
49    flex:3;
50}
51.liquid-column4 .elementor-widget-wrap{
52    opacity: 0;
53}
54
55.liquid-column4:hover .elementor-widget-wrap {
56    transition: opacity 0.4s ease0.2s;
57opacity:1;
58}
59.liquid-column4{
60    height: 500px;
61    overflow: hidden;
62    flex: 1;
63    transition: flex 0.8s ease;
64}
65.liquid-column4:hover{
66    flex:3;
67
68}
69}
70
71### 試したこと
72
73・固定ページ→カラムに追加
74・:not（？）みたいなものを入れた
75・正直何もわからないので、色々試しましたが何を試しているかもわからない状況です…。
76
77### 補足情報（FW/ツールのバージョンなど）
78wordpress
79Astra
80Elementor Pro
81を使用しております。

Lhankor_Mhy

2021/11/09 00:45

ご提示のページを拝見しましたが、アコーディオンメニューを見つけることができませんでした。どのあたりにありますか？

nanashinogonbei

2021/11/09 04:22

コメントありがとございます。画像をアップしましたのでよろしくお願いいたします。スクロールして何番目かのデザインです。スライドに近いアコーディオンメニューだと思います。

Lhankor_Mhy

2021/11/09 04:30

動画のようです。 https://player.vimeo.com/video/345130802?background=1

nanashinogonbei

2021/11/09 04:59

この動画のようなスライドのメニューを作ることは可能でしょうか？

Lhankor_Mhy

2021/11/09 05:06

「Pure CSS Accordion Slider」でググるといろいろ出てくるので、作ることは可能なのだろうと思います。

行動規範の内容に同意します

回答1件

ベストアンサー

画像とテキストの一部を表示させ、

マウスオーバーで画像、テキストを全て表示

こういうことでしょうか？
クラスをたくさん書くのは面倒だったので、属性セレクタでまとめてしまいました。
サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/6cmby2ru/

css
1  [class^="liquid-column"] .elementor-widget-wrap {
2    width: 1em;
3    overflow: hidden;
4    white-space: nowrap;
5    text-overflow: "";
6  }
7  [class^="liquid-column"]:hover .elementor-widget-wrap {
8    transition: width 0.8s ease;
9    width: 100%;
10  }