カード型デザイン時のシンプルなマウスホバーのエフェクトを８パターン作成したので書き留めておきます。

スポンサーリンク

サンプル一覧

サンプルのカードをクリックすると説明にジャンプします。

サンプル 01

サムネイルにマウスを重ねると半透明になり、タイトルにマウスを重ねると色を赤に変えてます

サンプル 02

カードにマウスを重ねるとカード全体が半透明になります

サンプル 03

カードにマウスを重ねるとカード全体が半透明になり、サムネイルにマウスを重ねるとサムネイルが横方向に180°回転します

サンプル 04

カードにマウスを重ねるとカード全体が半透明になりサムネイルが横方向に180°回転します
さらに読む...

サンプル 05

カードにマウスを重ねるとサムネイルの上にキャプションが表示されます

サンプル 06

カードにマウスを重ねるとカード全体をマスクします

サンプル 07

カードにマウスを重ねるとカードが浮き上がって見えます

サンプル 08

カードにマウスを重ねるとカード全体が半透明になり、沈んだように見えます

サンプル 1

サンプル 01

サムネイルにマウスを重ねると半透明になり、タイトルにマウスを重ねると色を赤に変えてます

普通によく見かけるホバーエフェクトです。

HTML


<div class="sample01">
	<a href="#">
		<img src="./image/sample01.jpg" />
		<h2>サンプル 01</h2>
	</a>
	<p>サムネイルにマウスを重ねると半透明になり、タイトルにマウスを重ねると色を赤に変えてます</p>
</div>

CSS


.sample01 {
	margin: 10px 8px;
	width: 300px;
	height: 400px;
	border-radius: 6px;
	box-shadow: 0px 2px 4px #aaa;
	display: inline-block;
}
.sample01 img {
	width: 300px;
	height: 200px;
	border-radius: 6px 6px 0 0;
}
.sample01 h2 {
	font-size: 18px;
	padding: 4px 16px;
}
.sample01 p {
	padding: 4px 16px;
}
.sample01 img:hover {
	opacity: 0.6;
	color: #f00;
}
.sample01 h2:hover {
	color: #f00;
}

サンプル 2

サンプル 02

カードにマウスを重ねるとカード全体が半透明になります

HTML

<a>タグの中に<div>タグを追加してカード全体がマウスホーバー対象としています。 


<div class="sample02">
	<a href="#">
		<div class="card02">
			<img src="./image/sample01.jpg" />
			<h2>サンプル 02</h2>
			<p>カードにマウスを重ねるとカード全体が半透明になります</p>
		</div>
	</a>
</div>

CSS


.sample02 {
	width: 300px;
	height: 400px;
	vertical-align: top;
	margin: 10px 8px;
	border-radius: 6px;
	box-shadow: 0px 2px 4px #aaa;
	display:inline-block;
}
.sample02 .card02 {
	width: 100%;
	height: 100%;
}
.sample02 h2 {
	font-size: 18px;
	padding: 4px 16px;
}
.sample02 p {
	padding: 4px 16px;
}
.sample02 img {
	width: 300px;
	height: 200px;
	border-radius: 6px 6px 0 0;
}
.sample02 .card02:hover {
	opacity: 0.6;
}

サンプル 3

サンプル 03

カードにマウスを重ねるとカード全体が半透明になり、サムネイルにマウスを重ねるとサムネイルが横方向に180°回転します

HTML

<a>タグの中に<div>タグを追加してカード全体がマウスホーバー対象としています。 


<div class="sample03">
	<a href="#">
		<div class="card03">
			<img src="./image/sample01.jpg" />
			<h2>サンプル 03</h2>
			<p>カードにマウスを重ねるとカード全体が半透明になり、サムネイルにマウスを重ねるとサムネイルが横方向に180°回転します</p>
		</div>
	</a>
</div>

CSS


.sample03 {
	width: 300px;
	height: 400px;
	vertical-align: top;
	margin: 10px 8px;
	border-radius: 6px;
	box-shadow: 0px 2px 4px #aaa;
	display: inline-block;
}
.sample03 .card03 {
	width: 100%;
	height: 100%;
}
.sample03 h2 {
	font-size: 18px;
	padding: 4px 16px;
}
.sample03 p {
	padding: 4px 16px;
}
.sample03 .card03 img {
	width: 300px;
	height: 200px;
	border-radius: 6px 6px 0 0;
	-webkit-transition: all 0.6s ease;
	transition: all 0.6s ease;
}
.sample03:hover {
	opacity: 0.6;
}
.sample03 img:hover {
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

サンプル 4

サンプル 04

カードにマウスを重ねるとカード全体が半透明になりサムネイルが横方向に180°回転します

サンプル 3と違いカードの上にマウスを重ねたら、サムネイルを横方向に180°回転しています。下記のようにホバー対象を何にするかで処理が変わります。
「.sample03 img:hover」
「.sample04:hover img」

HTML

<a>タグの中に<div>タグを追加してカード全体がマウスホーバー対象としています。 


<div class="sample04">
	<a href="#">
		<div class="card04">
			<img src="./image/sample01.jpg" />
			<h2>サンプル 04</h2>
			<p>カードにマウスを重ねるとカード全体が半透明になりサムネイルが横方向に180°回転します</p>
		</div>
	</a>
</div>

CSS


.sample04 {
	width: 300px;
	height: 400px;
	vertical-align: top;
	margin: 10px 8px;
	border-radius: 6px;
	box-shadow: 0px 2px 4px #aaa;
	display: inline-block;
}
.sample04 .card04 {
	width: 100%;
	height: 100%;
}
.sample04 h2 {
	font-size: 18px;
	padding: 4px 16px;
}
.sample04 p {
	padding: 4px 16px;
}
.sample04 img {
	width: 300px;
	height: 200px;
	border-radius: 6px 6px 0 0;
	-webkit-transition: all 0.6s ease;
	transition: all 0.6s ease;
}
.sample04:hover {
	opacity: 0.6;
}
.sample04:hover img {
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

サンプル 5

さらに読む...

サンプル 05

カードにマウスを重ねるとサムネイルの上にキャプションが表示されます

HTML

<a>タグの中に<div>タグを追加してカード全体がマウスホーバー対象としています。 


<div class="sample05">
	<a href="#">
		<div class="card05">
			<img src="./image/sample01.jpg" />
			<div class="mask">
				<div class="caption">さらに読む...</div>
			</div>
			<h2>サンプル 05</h2>
			<p>カードにマウスを重ねるとサムネイルの上にキャプションが表示されます</p>
		</div>
	</a>
</div>

CSS


.sample05 {
	width: 300px;
	height: 400px;
	vertical-align: top;
	margin: 10px 8px;
	border-radius: 6px;
	box-shadow: 0px 2px 4px #aaa;
	display: inline-block;
	position: relative;
}
.sample05 .card05 {
	width: 100%;
	height: 100%;
}
.sample05 h2 {
	font-size: 18px;
	padding: 4px 16px;
}
.sample05 p {
	padding: 4px 16px;
}
.sample05 .caption {
	font-size: 24px;
	text-align: center;
	padding-top: 80px;
	color: #fff;
}
.sample05 img {
	width: 300px;
	height: 200px;
	border-radius: 6px 6px 0 0;
}
.sample05 .mask {
	width: 300px;
	height: 200px;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	border-radius: 6px;
	background: rgba(0,0,55,0.5);
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
.sample05:hover .mask {
	opacity: 0.7;
}

サンプル 6

サンプル 06

カードにマウスを重ねるとカード全体をマスクします

マウスを重ねるとカードと同じ大きさのマスクをオーバーレイしています。

HTML

<a>タグの中に<div>タグを追加してカード全体がマウスホーバー対象としています。 


<div class="sample06">
	<a href="#">
		<img src="./image/sample01.jpg" />
		<h2>サンプル 06</h2>
		<p>カードにマウスを重ねるとカード全体をマスクします</p>
		<span class="mask"></span>
	</a>
</div>

CSS


.sample06 {
	width: 300px;
	height: 400px;
	vertical-align: top;
	margin: 10px 8px;
	border-radius: 6px;
	box-shadow: 0px 2px 4px #aaa;
	position: relative;
	display: inline-block;
}
.sample06 h2 {
	font-size: 18px;
	padding: 4px 16px;
}
.sample06 p {
	padding: 4px 16px;
}
.sample06 img {
	width: 300px;
	height: 200px;
	border-radius: 6px 6px 0 0;
}
.sample06 .mask {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	border-radius: 6px;
	background: rgba(0,0,55,0.4);
}
.sample06:hover .mask {
	opacity: 0.7;
}

サンプル 7

サンプル 07

カードにマウスを重ねるとカードが浮き上がって見えます

マウスを重ねるとカードの周りの影を大きして浮き上がったようにしています。

HTML

<a>タグの中に<div>タグを追加してカード全体がマウスホーバー対象としています。 


<div class="sample07">
	<a href="#">
		<div class="card07">
			<img src="./image/sample01.jpg" />
			<h2>サンプル 07</h2>
			<p>カードにマウスを重ねるとカードが浮き上がって見えます</p>
		</div>
	</a>
</div>

CSS


.sample07 {
	width: 300px;
	height: 400px;
	vertical-align: top;
	margin: 10px 8px;
	border-radius: 6px;
	box-shadow: 0px 2px 4px #aaa;
	display: inline-block;
}
.sample07 .card07 {
	width: 100%;
	height: 100%;
}
.sample07 h2 {
	font-size: 18px;
	padding: 4px 16px;
}
.sample07 p {
	padding: 4px 16px;
}
.sample07 img {
	width: 300px;
	height: 200px;
	border-radius: 6px 6px 0 0;
}
.sample07:hover {
	box-shadow: 0px 6px 8px #333;
	opacity: 0.6;
}

サンプル 8

サンプル 08

カードにマウスを重ねるとカード全体が半透明になり、沈んだように見えます

マウスを重ねるとカードの周りの影を小さくして沈んだようにしています。

HTML

<a>タグの中に<div>タグを追加してカード全体がマウスホーバー対象としています。 


<div class="sample08">
	<a href="#">
		<div class="card08">
			<img src="./image/sample01.jpg" />
			<h2>サンプル 08</h2>
			<p>カードにマウスを重ねるとカード全体が半透明になり、沈んだように見えます</p>
		</div>
	</a>
</div>

CSS


.sample08 {
	width: 300px;
	height: 400px;
	vertical-align: top;
	margin: 10px 8px;
	border-radius: 6px;
	box-shadow: 0px 6px 8px #999;
	position: relative;
	display: inline-block;
}
.sample08 .card08 {
	width: 100%;
	height: 100%;
}
.sample08 h2 {
	font-size: 18px;
	padding: 4px 16px;
}
.sample08 p {
	padding: 4px 16px;
}
.sample08 img {
	width: 300px;
	height: 200px;
	border-radius: 6px 6px 0 0;
}
.sample08:hover {
	box-shadow: 0px 1px 2px #aaa;
	opacity: 0.6;
}