cssのみで作成したマウスホバーエフェクトで、画像にマウスを重ねると画像の上又は下に吹き出しが表示されます。写真の内容についての説明をする時に使えるかもしれません。

スポンサーリンク

サンプル

画像にマウスを重ねるとエフェクトが見れます。

 

サンプル1

fruit

クリックしてもジャンプしません

画像の上方に吹き出しを表示します。

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

fruit

クリックしてもジャンプしません

画像の下方に吹き出しを表示します。

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; /* 三角形の高さを2倍した値 */
	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

fruit

クリックしてもジャンプしません

画像の下に吹き出しみたいなのを表示

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

fruit

クリックしてもジャンプしません

画像の下に吹き出しみたいなのを表示。サンプル3との違いは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

fruit

クリックしてもジャンプしません

画像の上に吹き出しみたいなのを表示

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

fruit

クリックしてもジャンプしません

画像の上に吹き出しみたいなのを表示。サンプル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;
}