画像にカーソルを合わせるとタイトルが出てくるやつ
今回作るもの
たまにWebサイトで見かける、マウスを当てたら画像のタイトルが出てくるやつです。
html、css、jQueryを用いて実装していきます。
必要なファイルとその中身(完成ソースコード)
html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="query.js"></script>
</head>
<body>
<div class="img">
<img src="coffee-1281880_1920.jpg">
<div class="modal">
<h1>スターバックス</h1>
</div>
</div>
</body>
</html>
css
.img {
position: relative;
cursor: pointer;
}
img {
width: 50%;
}
.modal {
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.8);
z-index: 10;
height: 475px;
width: 713px;
display: none;
}
.modal h1 {
color: #fff;
text-align: center;
line-height: 435px;
}
.modal-active {
display: block;
}
jQuery
$(function(){
$('img').hover(
function() {
$('.modal').addClass('modal-active');
},
function(){
$('.modal').removeClass('modal-active');
}
);
});
実装手順
まずは、画像をブラウザに表示させます。
次に、モーダルを作成します。
最後に、画像にカーソルを合わせた時の処理を書いていきます。
画像を表示させる
表示させたい画像をフォルダに配置した後、画像を表示させます。
<img src="coffee-1281880_1920.jpg">
このままでは、画像が大きすぎてしまう恐れがあるため、サイズを指定します。
img {
width: 50%;
}
cssはhtmlのheadタグ内で読み込んでおきます。
<head>
<link rel="stylesheet" href="〇〇〇.css">
</head>
以上の動作で、このように画像が表示されました。
モーダルを作成する
まずは、モーダルの基礎を作ります。
html
<div class="modal">
<h1>スターバックス</h1>
</div>
css
.modal {
background-color: rgba(0,0,0,0.8);
}
.modal h1 {
color: #fff;
text-align: center;
}
これで、こんなものが出来ました。
次に、ピッタリと画像に重なるように調整します。
imgタグをimgというクラスを持ったdiv要素で囲い
<div class="img">
<img src="coffee-1281880_1920.jpg">
</div>
モーダルクラスを持ったdiv要素を
<div class="modal">
<h1>スターバックス</h1>
</div>
その中に入れます。
<div class="img">
<img src="coffee-1281880_1920.jpg">
<div class="modal">
<h1>スターバックス</h1>
</div>
</div>
そして、imgクラスを持ったdiv要素を基準として
.img {
position: relative;
}
モーダルが画像に重なるように調整します。
.modal {
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.8);
z-index: 10;
height: 475px;
width: 713px;
}
.modal h1 {
line-height: 435px;
}
z-index: 10;
これを記述することで、モーダルが手前に来るようになります。
以上の作業で、モーダルを画像に重ねることが出来ました。
画像にカーソルを合わせた時の処理
まずは、デフォルトでモーダルを非表示にさせます。
.modal {
display: none;
}
jQueryは、htmlのheadタグ内で読み込んでおき
<head>
<script src="query.js"></script>
</head>
hoverイベントを書いていきます。
$(function(){
$('img').hover(
function() {
$('.modal').addClass('modal-active');
},
function(){
$('.modal').removeClass('modal-active');
}
);
});
画像にカーソルを合わせた時の処理を書いています。
$('img').hover(
function() {
},
function(){
}
);
hoverイベントは、第一引数と第二引数を取ることが出来ます。
$(function(){
$('').hover(
function() {
//カーソルを合わせた時の処理
},
function(){
//カーソルが外れた時の処理
}
);
});
今回の第一引数には、
$('.modal').addClass('modal-active');
モーダルにmodal-activeというクラスを加えるという処理を書いています。
そのmodal-activeというクラスは、cssに用意しておきます。
.modal-active {
display: block;
}
このクラスが付くとdisplayがnoneからblockに変わる・・・つまりモーダルが表示されます。
第二引数には、
$('.modal').removeClass('modal-active');
モーダルからmodal-avtiveクラスを外す処理を書いています。
つまりモーダルが非表示になります。
おわりに
以上で作りたかったものを作ることが出来ました。
画像が2つ以上の場合は、jQueryの記述が少し違ってくるので、またの機会に書いていこうと思います。
