マウスホバーすると画像が全体表示されるギャラリーの作り方
- 記事をシェアする：
-
-
-
今回は、マウスホバーによって、ホバーした画像と対応する背景画像を全体表示する方法を紹介します。
シンプルなHTML、CSS、jQueryで実装できて、且つ、おしゃれな表現が可能になるのでぜひ活用してください！
※ホバー制御なのでPCサイズの表現を前提にしています。
【記事の目次】
デモ：完成のイメージ
まずは簡単なデモをご覧ください。
See the Pen Untitled by 小原悠 (@rasamonv-the-animator) on CodePen.
サムネイル画像にマウスホバーすると、対応する背景画像が全体表示されます。サムネイル画像と全体表示される画像で構成されています。
ソースコード解説
上記デモに使用したソースコードを、HTML、CSS、jQueryに分けて解説していきます。
HTMLの解説
まず、基本的なHTML構造を用意します。この例では、サムネイル画像と全体表示される画像のリストを作成します。
対応させるサムネイル画像と全体表示される画像に、同一の属性を指定してください。今回の例だと、対応する画像にdata-num属性を付与しています。
これは、ホバーしたアイテムと同一の属性を持つ要素に「is-active」を付与するためです。
<div class="showcase">
<div class="showcase__list">
<!-- サムネイル01 -->
<a href="#" class="showcase__item" data-num="1">
<img src="https://hisa-web.com/manage/wp-content/themes/myblog/assets/img/single/blog/car_thumb01.jpg"
alt="サムネイル01">
</a>
<!-- サムネイル02 -->
<a href="#" class="showcase__item" data-num="2">
<img src="https://hisa-web.com/manage/wp-content/themes/myblog/assets/img/single/blog/car_thumb02.jpg"
alt="サムネイル02">
</a>
<!-- サムネイル03 -->
<a href="#" class="showcase__item" data-num="3">
<img src="https://hisa-web.com/manage/wp-content/themes/myblog/assets/img/single/blog/car_thumb03.jpg"
alt="サムネイル03">
</a>
<!-- サムネイル04 -->
<a href="#" class="showcase__item" data-num="4">
<img src="https://hisa-web.com/manage/wp-content/themes/myblog/assets/img/single/blog/car_thumb04.jpg"
alt="サムネイル04">
</a>
<!-- 背景画像01 -->
<div class="showcase__item-bg" data-num="1">
<img src="https://hisa-web.com/manage/wp-content/themes/myblog/assets/img/single/blog/car_bg01.jpg"
alt="背景01">
</div>
<!-- 背景画像02 -->
<div class="showcase__item-bg" data-num="2">
<img src="https://hisa-web.com/manage/wp-content/themes/myblog/assets/img/single/blog/car_bg02.jpg"
alt="背景02">
</div>
<!-- 背景画像03 -->
<div class="showcase__item-bg" data-num="3">
<img src="https://hisa-web.com/manage/wp-content/themes/myblog/assets/img/single/blog/car_bg03.jpg"
alt="背景03">
</div>
<!-- 背景画像04 -->
<div class="showcase__item-bg" data-num="4">
<img src="https://hisa-web.com/manage/wp-content/themes/myblog/assets/img/single/blog/car_bg04.jpg"
alt="背景04">
</div>
</div>
</div>aタグでなくても実装可能です。ただ例えば、ページ遷移のリンクを設定することで、ナビゲーションメニューとしても機能します。
CSS（SCSS）の解説
次に、CSS（SCSS）コードを見てみましょう。「is-active」クラスの有無で表示切り替えを行っています。
・サムネイル画像：「is-active」クラスが付与されると、opacity: 0;
・全体表示される画像：「is-active」クラスが付与されると、opacity: 1;
これらスタイルによって、視覚的にマウスホバーした画像が要素内で全体表示されます。
/* 画像のスタイル設定 */
img {
display: inline-block;
object-fit: cover; /* 画像のアスペクト比を維持しつつ、要素全体に収まるようにする */
width: 100%;
height:100%;
}
.showcase {
height: 100vh; /* ビューポートの高さに合わせる */
&__list {
position: relative;
display: flex; /* 子要素を横並びにする */
height: 100%;
}
&__item {
position: relative;
display: block;
width: 25%; /* 各サムネイルの幅を25%に設定 */
height: 100%;
border: 0.5px solid rgba(53, 53, 57, 1);
transition: 0.3s all ease; /* トランジション効果 */
z-index: 1;
img {
opacity: 1; /* 画像の透明度を1（不透明）に設定 */
}
&.is-active {
img {
opacity: 0; /* アクティブ時の画像透明度を0に設定 */
}
}
}
&__item-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0; /* 初期状態の背景画像の透明度を0に設定 */
transition: 0.3s all ease; /* トランジション効果 */
&.is-active {
opacity: 1; /* アクティブ時の背景画像の透明度を1に設定 */
}
}
}jQueryの解説
最後に、jQueryを使った「is-active」の制御についてです。
$(document).ready(function () {
// サムネイル画像にマウスホバー時の処理
$('.showcase__item').on('mouseenter', function () {
var caseNum = $(this).data('num'); // data-num属性の値を取得
// 既存のアクティブクラスを削除
$('.showcase__item-bg').removeClass('is-active');
$('.showcase__item').removeClass('is-active');
// サムネイルを透過するためのクラスを追加
$('.showcase__item').addClass('is-active');
// ホバーしたアイテムと対応する背景画像をアクティブにする
$('.showcase__item-bg[data-num=' + caseNum + ']').addClass('is-active');
});
// サムネイル画像からマウスが離れた時の処理
$('.showcase__item').on('mouseleave', function () {
var caseNum = $(this).data('num'); // data-num属性の値を取得
// ホバーが外れたときにアクティブクラスを削除
$(this).removeClass('is-active');
$('.showcase__item').removeClass('is-active');
$('.showcase__item-bg[data-num=' + caseNum + ']').removeClass('is-active');
});
});ここで注意すべき点は、以下の部分です。
var caseNum = $(this).data('num'); // data-num属性の値を取得ホバーしたサムネイルのdata-num属性の値を取得し、変数caseNumに代入しています。
$('.showcase__item-bg[data-num=' + caseNum + ']').addClass('is-active');ホバーしたサムネイルのdata-num属性の値と対応する背景画像に、is-active を追加しています。
mouseleaveアクション以下は初期状態へ戻すための処理を記述しています。
以上、画像をマウスホバーで全体表示する方法 でした。
まとめ
今回の記事では、ホバーアクションを利用したワンランク上の画像表示方法を紹介しました。デモは、サムネイルが縦に長いレイアウトですが、もちろん横向きも可能です。サイトの雰囲気に合わせてカスタマイズし、リッチな画像表示を実現しましょう。
最後までお読みいただきありがとうございました。
また別の記事でお会いしましょう！
- 記事をシェアする：
-
-
-
