cssのみで作成したマウスホバーエフェクトで、画像にマウスを重ねると画像の上又は下に吹き出しが表示されます。写真の内容についての説明をする時に使えるかもしれません。
サンプル
画像にマウスを重ねるとエフェクトが見れます。
サンプル1
クリックしてもジャンプしません
画像の上方に吹き出しを表示します。
html
<div class="sample">
<img src="./fruit.jpg" />
<div class="box">
<p class="text">クリックしてもジャンプしません</p>
</div>
</div>
css
マウスホバー以外の時は「.box」を「display:none」にします。「none」にしないと、マウスが吹き出しを表示する位置に来た時に反応して吹き出しが表示されてしまいます。「.box:after」で三角形を作成しています。
.sample {
position: relative;
width: 300px;
height: 200px;
box-shadow: 1px 1px 1px #ccc;
z-index: auto;
}
.sample img {
width: 100%;
height: 100%;
}
.sample .box {
position:absolute;
width: 300px; /* 吹き出しの幅 */
height: 60px; /* 吹き出しの高さ */
top: -76px; /* 吹き出しと三角形の高さをプラスした値 */
left: 0;
border-radius: 10px 10px 10px 10px;
background-color: #0f0;
display: none;
}
.sample .box:after { /* 三角形を作成 */
position: absolute;
content: "";
width: 0;
height: 0;
top: 60px; /* 吹き出しの高さと同じ値 */
left: 32px;
border: 16px solid transparent;
border-top: 16px solid #0f0;
}
.sample .text {
font-size: 16px;
position: absolute;
top: 8px;
left: 4px;
color: #000;
}
.sample:hover .box {
z-index: 2;
display: block;
}
サンプル2
クリックしてもジャンプしません
画像の下方に吹き出しを表示します。
html
<div class="sample">
<img src="./fruit.jpg" />
<div class="box">
<p class="text">クリックしてもジャンプしません</p>
</div>
</div>
css
マウスホバー以外の時は「.box」を「display:none」にします。「none」にしないと、マウスが吹き出しを表示する位置に来た時に反応して吹き出しが表示されてしまいます。「.box:after」で三角形を作成しています。
.sample {
position: relative;
width: 300px;
height: 200px;
box-shadow: 1px 1px 1px #ccc;
z-index: auto;
}
.sample img {
width: 100%;
height: 100%;
}
.sample .box {
position: absolute;
width: 300px; /* 吹き出しの幅 */
height: 60px; /* 吹き出しの高さ */
top: 216px; /* 画像と三角形の高さをプラスした値 */
left: 0;
border-radius: 10px 10px 10px 10px;
background-color: #ff0;
display: none;
}
.sample .box:after { /* 三角形を作成 */
position: absolute;
content: "";
width: 0;
height: 0;
top: -32px; /* 三角形の高さを２倍した値 */
left: 32px;
border: 16px solid transparent;
border-bottom: 16px solid #ff0;
}
.sample .text {
position: absolute;
font-size: 16px;
top: 8px;
left: 4px;
color: #000;
}
.sample:hover .box {
z-index: 2;
display: block;
}
サンプル3
クリックしてもジャンプしません
画像の下に吹き出しみたいなのを表示
html
<div class="sample">
<img src="./fruit.jpg" />
<div class="box">
<p class="text">クリックしてもジャンプしません</p>
</div>
</div>
css
マウスホバーで吹き出しよりも画像の方が上に来るように「z-index」で調整しています。「z-index」を有効にするには、「position」を設定する必要があります。マウスホバー以外の時は「.box」を「display:none」にします。「none」にしないと、マウスが吹き出しを表示する位置に来た時に反応して吹き出しが表示されてしまいます。
.sample {
position: relative;
width: 300px;
height: 200px;
box-shadow: 1px 1px 1px #ccc;
z-index: auto;
}
.sample img {
position: relative;
width: 100%;
height: 100%;
}
.sample .box {
position: absolute;
width: 300px;
height: 260px; /* 画像の高さと吹き出しの高さをプラスした値 */
top: 0;
left: 0;
border-radius: 0 0 10px 10px;
background-color: #0f0;
box-shadow: 2px 2px 4px #000;
display: none;
}
.sample .text {
position: absolute;
font-size: 16px;
left: 4px;
top: 208px;
color: #000;
}
.sample:hover img {
z-index: 4; /* .boxよりも上に表示 */
}
.sample:hover .box {
z-index: 3; /* imgよりも下に表示 */
display: block;
}
サンプル4
クリックしてもジャンプしません
画像の下に吹き出しみたいなのを表示。サンプル３との違いは4ピクセルの余白をつけました。
html
<div class="sample">
<img src="./fruit.jpg" />
<div class="box">
<p class="text">クリックしてもジャンプしません</p>
</div>
</div>
css
マウスホバーで吹き出しよりも画像の方が上に来るように「z-index」で調整しています。「z-index」を有効にするには、「position」を設定する必要があります。マウスホバー以外の時は「.box」を「display:none」にします。「none」にしないと、マウスが吹き出しを表示する位置に来た時に反応して吹き出しが表示されてしまいます。
.sample {
position: relative;
width: 300px;
height: 200px;
box-shadow: 1px 1px 1px #ccc;
z-index: auto;
}
.sample img {
position: relative;
width: 100%;
height: 100%;
}
.sample .box {
position: absolute;
width: 308px; /* 画像の幅と左右の余白をプラスした値 */
height: 264px; /* 画像の高さと吹き出しと余白の高さをプラスした値 */
top: -4px; /* 余白分上にずらす */
left: -4px; /* 余白分左にずらす */
border-radius: 4px 4px 10px 10px;
background-color: #ff0;
box-shadow: 2px 2px 4px #000;
display: none;
}
.sample .text {
position: absolute;
font-size: 16px;
left: 4px;
top: 208px;
color: #000;
}
.sample:hover img {
z-index: 4; /* .boxよりも上に表示 */
}
.sample:hover .box {
z-index: 3; /* imgよりも下に表示 */
display: block;
}
サンプル5
クリックしてもジャンプしません
画像の上に吹き出しみたいなのを表示
html
<div class="sample">
<img src="./fruit.jpg" />
<div class="box">
<p class="text">クリックしてもジャンプしません</p>
</div>
</div>
css
マウスホバーで吹き出しよりも画像の方が上に来るように「z-index」で調整しています。「z-index」を有効にするには、「position」を設定する必要があります。マウスホバー以外の時は「.box」を「display:none」にします。「none」にしないと、マウスが吹き出しを表示する位置に来た時に反応して吹き出しが表示されてしまいます。
.sample {
position: relative;
width: 300px;
height: 200px;
box-shadow: 1px 1px 1px #ccc;
z-index: auto;
}
.sample img {
position: relative;
width: 100%;
height: 100%;
}
.sample .box {
position: absolute;
width: 300px;
height: 260px; /* 画像の高さと吹き出しの高さをプラスした値 */
top: -60px; /* 文字を表示する文だけ上にずらす */
left: 0;
border-radius: 10px 10px 0 0;
background-color: #0f0;
box-shadow: 1px 1px 3px #000;
display: none;
}
.sample .text {
position: absolute;
font-size: 16px;
top: 8px;
left: 4px;
color: #000;
}
.sample:hover img {
z-index: 4; /* .boxよりも上に表示 */
}
.sample:hover .box {
z-index: 3; /* imgよりも下に表示 */
display: block;
}
サンプル6
クリックしてもジャンプしません
画像の上に吹き出しみたいなのを表示。サンプル5との違いは4ピクセルの余白をつけました。
html
<div class="sample">
<img src="./fruit.jpg" />
<div class="box">
<p class="text">クリックしてもジャンプしません</p>
</div>
</div>
css
マウスホバーで吹き出しよりも画像の方が上に来るように「z-index」で調整しています。「z-index」を有効にするには、「position」を設定する必要があります。マウスホバー以外の時は「.box」を「display:none」にします。「none」にしないと、マウスが吹き出しを表示する位置に来た時に反応して吹き出しが表示されてしまいます。
.sample {
position: relative;
width: 300px;
height: 200px;
box-shadow: 1px 1px 1px #ccc;
z-index: auto;
}
.sample img {
position: relative;
width: 100%;
height: 100%;
}
.sample .box {
position: absolute;
width: 308px; /* 画像の幅と左右の余白をプラスした値 */
height: 264px; /* 画像の高さと吹き出しと余白の高さをプラスした値 */
top: -60px; /* 余白分上にずらす */
left: -4px; /* 余白分左にずらす */
border-radius: 10px 10px 0 0;
background-color: #ff0;
box-shadow: 1px 1px 3px #000;
display: none;
}
.sample .text {
position: absolute;
font-size: 16px;
top: 8px;
left: 4px;
color: #000;
}
.sample:hover img {
z-index: 4; /* .boxよりも上に表示 */
}
.sample:hover .box {
z-index: 3; /* imgよりも下に表示 */
display: block;
}
calcを使用してflexの子要素の長さを決める方法 
ラジオボタンやチェックボックスでボタンの次に改行が入りずれてしまうのを防ぐ方法 
画像の上に透けている文字列を表示する方法 
clamp関数を使ってフォントサイズを可変にする方法 
見出しに文字の長さだけ間隔をあけて下線を引く 
テーブルのセルの結合 
前：jQueryプラグインの設置方法
次：背景画像のスライドショーjquery mb bgndGalleryの使い方
コメントを残す