hover時に画像に文字を浮かび上がられる方法

前提・実現したいこと

カルーセルパネルで表示している画像に対して、hover時に文字を出現させたい。hoverが外れたら、文字も消える使用。
今回は初期状態で表示されています一番左の画像のみ、表示させたい。
表示させたい文字:Farfalle genovese
文字色:#fff

発生している問題・エラーメッセージ

どうやって出現させるか浮かばない。

該当のソースコード

--HTML--
<!-- menu -->
    <section class="menu">
      <h1 class="menu__ttl">Menu</h1>
      <ul id="carousel" class="carousel">
        <li>
          <div class="hidden">
            <div class="menu__carousel-item menu__pasta">
            </div>
          </div>
        </li>
        <li>
          <div class="hidden">
            <div class="menu__carousel-item menu__pasta2"></div>
          </div>
        </li>
        <li>
          <div class="hidden">
            <div class="menu__carousel-item menu__pizza"></div>
          </div>
        </li>
        <li>
          <div class="hidden">
            <div class="menu__carousel-item menu__cake"></div>
          </div>
        </li>
        <li>
          <div class="hidden">
            <div class="menu__carousel-item menu__fish"></div>
          </div>
        </li>
        <li>
          <div class="hidden">
            <div class="menu__carousel-item menu__meat"></div>
          </div>
        </li>
      </ul>
    </section>
    <!-- /menu -->
--HTML--

--CSS--
.menu__ttl {
  color: #cccccc;
  font-size: 56px;
  padding: 40px auto;
  text-align: center;
}
.carousel {
  margin: 32px 0;
  position: relative;
}
.hidden {
  overflow: hidden;
}
.menu__carousel-item {
  width: 400px;
  height: 500px;
  position: relative;

  transition: 0.6s;
}
.menu__pasta {
  background: url(../img/pasta01.jpg) center / cover;
}
.menu__pasta:hover {
  transform: scale(1.1);
  filter: grayscale(100%);
  opacity: 1;
}
.menu__pasta2 {
  background: url(../img/pasta02.jpg) center / cover;
}
.menu__pasta2:hover {
  transform: scale(1.1);
  filter: grayscale(100%);
}
.menu__pizza {
  background: url(../img/pizza.jpg) center / cover;
}
.menu__pizza:hover {
  transform: scale(1.1);
  filter: grayscale(100%);
}
.menu__cake {
  background: url(../img/tiramisu.jpg) center / cover;
}
.menu__cake:hover {
  transform: scale(1.1);
  filter: grayscale(100%);
}

.menu__fish {
  background: url(../img/fish.jpg) center / cover;
}
.menu__fish:hover {
  transform: scale(1.1);
  filter: grayscale(100%);
}
.menu__meat {
  background: url(../img/meatball.jpg) center / cover;
}
.menu__meat:hover {
  transform: scale(1.1);
  filter: grayscale(100%);
}
.menu__name {
  text-align: center;
  color: #fff;
  opacity: 0;
}
.menu__name:hover {
  display: inline-block;
}
.btn__prev {
  position: absolute;
  top: 50%;
  left: 2%;
  background-color: #dddd;
  padding: 8px;
  cursor: pointer;
  z-index: 100;
}
.btn__next {
  position: absolute;
  top: 50%;
  left: 95%;
  background-color: #dddd;
  padding: 8px;
  cursor: pointer;
}
--CSS--

--JQuery--
 const carousel = $('#carousel');

  carousel.slick({
    prevArrow: '<img src="img/arrow-prev.png" class="btn__prev">',
    nextArrow: '<img src="img/arrow-next.png" class="btn__next">',
    autoplay: true,
    infinite: true,
    accessibility: true,
    slidesToShow: 4,
    dots: true,
    arrows: true,
  });
});
--JQuery--

試したこと

pタグで文字を書き、初期状態でdisplay:none;にしhover時にdisplay:block;を試したが、うまくいかない。

補足情報（FW/ツールのバージョンなど）

JQueryはslickを使用しています。

skys215

2021/11/22 00:24

大体こんな感じかな ``` $('#carousel li').on('mouseenter', function(){ $('p').show(); }).on('mouseleave', function(){ $('p').hide(); }) ```

nao__funky

2021/11/22 07:16

こちらでも実装できました。ありがとうございます！！

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

回答1件

ベストアンサー

下記でどうでしょう。

html
1        <li>
2          <div class="hidden">
3            <div class="menu__carousel-item menu__pasta">
4              <p>Farfalle genovese</p>
5            </div>
6          </div>
7        </li>

css
1.menu__carousel-item {
2  position: relative;
3  display: flex;
4  align-items: center;
5  justify-content: center;
6}
7.menu__carousel-item p {
8  font-size: 30px;
9  color: #fff;
10  opacity: 0;
11  transition: 0.6s;
12}
13.menu__carousel-item:hover p {
14  opacity: 1;
15}