jQuery - 画像ホバー時に文字（キャプション）を表示する

以前、ホームページ運営者から「画像ホバー時の効果」について次のような相談を受けました。

相談者「下図のように、画像の下側に文字（テキスト）を表示しているのですが、文字部分に動きをつけたいと思っています」

私「どのような動きをつけたいのですか？」

相談者「普段は文字を表示せずに、画像ホバー時に下から文字が浮き上がってくる感じにできますか？」

私「jQueryやCSSで簡単に実装できますよ」

私「下から浮き上がるだけでなく、色を変えたり、拡大したり等いろんな効果（エフェクト）が実装できますよ」

今回はこの相談を解決するために「画像ホバー時に文字を表示させる」方法を紹介します。

単純に文字を「フェエードイン・フェードアウト」させる

サンプル

まずは上のサンプルのような、テキストを「フェードイン・フェードアウト」させる場合の HTML・CSS・jQeuryのソースコードを紹介します。

HTML


<div class="card-box">
  <div class="card-img">
    <img src="https://picture.brain-studio.com/img/img02/a0364-1.jpg">
  </div>
  <div class="card-text">
    テキスト1
  </div>
</div>

CSS


.card-box {
  position: relative;
  width: 200px;
  height: 150px;
  margin: 5px;
}

.card-img,
.card-img img {
  width: 100%;
}

.card-text {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #000;
  color: white;
  font-weight: bold;
  text-align: center;
  opacity: 0.8;
  display: none;
}

「position: absolute;」、「left: 0;」、「bottom: 0;」でテキストを表示する位置を設定しています。

jQuery


$(document).ready(function () {

  $('.card-box').on('mouseover', function () {
    $(this).children('.card-text').stop().fadeIn();
  });
  $('.card-box').on('mouseout', function () {
    $(this).children('.card-text').stop().fadeOut();
  });

});

画像ホバー時に文字を下から表示させる

サンプル

上のサンプルのように、画像ホバー時にテキストを下から浮き上がらせる場合の HTML・CSS・jQeuryのソースコードを紹介します。

HTML

HTMLは上記のHTMLと同じなので省略。

CSS


.card-box {
  position: relative;
  width: 200px;
  height: 150px;
  margin: 5px;
  overflow: hidden;
}

.card-img, .card-img img {
  width: 100%;
}

.card-text {
  position: absolute;
  width: 100%;
  height: 25px;
  left: 0;
  bottom: -25px;
  background-color: #000;
  color: white;
  font-weight: bold;
  text-align: center;
  opacity: 0.8;
}

CSSは赤字部分がポイントとなります。

テキスト部分を「bottom: -25px;」とし、最初はボックスの下側にはみ出すように配置しています。このはみ出た部分を表示しないように「overflow: hidden;」を設定。

jQuery


$(document).ready(function () {

  $('.card-box').on('mouseover', function () {
    $(this).children('.card-text').stop().animate({'bottom' : 0}, 200, 'linear');
  });
  $('.card-box').on('mouseout', function () {
    $(this).children('.card-text').stop().animate({'bottom' : "-25px"}, 200, 'linear');
  });
});

今回はanimate()メソッドを使ってテキスト部分を上下させています。

まとめ

今回紹介したのは、ほんの一例です。

色を変えたり、画像の透明度を変化させたり、画像を拡大したり等々、 jQeuryやCSSを使うことで、さまざまな効果（エフェクト）を実現できます。