CSSの小技 その8
今回は「CSSで出来るマウスオーバーエフェクト」です。
マウスカーソルを乗せた時（主に画像）の演出についてCSSのみでいろいろと出来ます。
当ブログのトップページでは画像に対してズームがかかるエフェクトを導入しています。

ズームイン/ズームアウト

transform: scale()を使って画像の大きさを変更し、ズームエフェクトにします。
マウスオーバー時にアニメーションをして画像をズームさせます。
transform: scale()の数値を調整することでズームイン、アウトの使い分けができます。

HTML

<div class="zoomin">
	<img src="common/images/test.png" alt="zoomin">
</div>

<div class="zoomout">
	<img src="common/images/test.png" alt="zoomout">
</div>

CSS

div.zoomin {
	margin: 30px;
	width: 200px;
	height: 150px;
	overflow: hidden;/* 画像をズームした場合のはみ出た部分を非表示 */
}

div.zoomin img {
	transform: scale(1);/* マウスを乗せていない時は大きさ比率を1にする */
	-webkit-transform: scale(1);
}

div.zoomin img:hover {
	transform: scale(1.1);/* マウスを乗せた時に比率1.1にする。 */
	-webkit-transform: scale(1.1);
	transition: 0.2s;/* 0.2秒をかけて大きくなるアニメーション */
	-webkit-transition: 0.2s;
}


div.zoomout {
	margin: 30px;
	width: 200px;
	height: 150px;
	overflow: hidden;/* 画像をズームした場合のはみ出た部分を非表示 */
}

div.zoomout img {
	transform: scale(1.1);/* マウスを乗せていない時は大きさ比率を1.1にする */
	-webkit-transform: scale(1.1);
}

div.zoomout img:hover {
	transform: scale(1);/* マウスを乗せた時に比率1にする。 */
	-webkit-transform: scale(1);
	transition: 0.2s;/* 0.2秒をかけて小さくなるアニメーション */
	-webkit-transition: 0.2s;
}

明るくする（半透明にする）

お次は、opacityを利用して、マウスを乗せた時に画像を半透明にして、
白い背景を透かせることで画像が明るくなったように見せます。
このエフェクトは良く見かけるものです。
背景の黒いサイトでは黒が透けて逆に暗くなってしまいますので、
その場合は画像と同サイズの白い背景を置きます。

HTML

<div class="opacity1">
	<img src="common/images/test.png" alt="opacity1">
</div>

<div class="wrapper">

	<div class="opacity1">
		<img src="common/images/test.png" alt="opacity1">
	</div>

	<div class="opacity2">
		<img src="common/images/test.png" alt="opacity2">
	</div>

</div>

CSS

div.opacity1 {
	margin: 30px;
	width: 200px;
	height: 150px;

}

div.opacity1 img {

}

div.opacity1 img:hover {
	opacity: 0.5;/* 透過率50% */
	transition: 0.2s;/* 0.2秒アニメーション */
	-webkit-transition: 0.2s;
}

div.wrapper {
	background: #000000; /* 黒背景 */
	width: 100%;
	padding: 30px 0;
}

div.opacity2 {
	background: #FFFFFF;/* 画像と同サイズの白背景 */
	margin: 30px;
	width: 200px;
	height: 150px;
}

div.opacity2 img {

}

div.opacity2 img:hover {
	opacity: 0.5;/* 透過率50% */
	transition: 0.2s;/* 0.2秒アニメーション */
	-webkit-transition: 0.2s;
}

白黒画像、セピア画像、ブラー

filter: grayscale()を利用して白黒画像に、またfilter: sepia()を利用してセピア画像にすることができます。
それからfilter: blur()を利用してブラー（ぼかし）の画像にすることもできます。
この3つの効果についてはIEでは効果が無いようで、FirefoxやGoogleChromeでは表示されました。

HTML

<div class="gray">
	<img src="common/images/test.png" alt="gray">
</div>

<div class="sepia">
	<img src="common/images/test.png" alt="sepia">
</div>

<div class="blur">
	<img src="common/images/test.png" alt="blur">
</div>

CSS

div.gray {
	margin: 30px;
	width: 200px;
	height: 150px;
}

div.gray img {
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	transition: 0.2s;
	-webkit-transition: 0.2s;
}

div.gray img:hover {
	filter: grayscale(0);
	-webkit-filter: grayscale(0);
}

div.sepia {
	margin: 30px;
	width: 200px;
	height: 150px;
}

div.sepia img {
	filter: sepia(100%);
	-webkit-filter: sepia(100%);
	transition: 0.2s;
	-webkit-transition: 0.2s;
}

div.sepia img:hover {
	filter: sepia(0);
	-webkit-filter: sepia(0);
}

div.blur {
	margin: 30px;
	width: 200px;
	height: 150px;
	overflow: hidden;/* ぼかしが外側へ広がるのではみ出る部分を非表示 */
}

div.blur img {
	filter: blur(5px);
	-webkit-filter: blur(5px);
	transition: 0.2s;
	-webkit-transition: 0.2s;
}

div.blur img:hover {
	filter: blur(0);
	-webkit-filter: blur(0);
}

他にも

他にも、画像を回転させたり、ピカっと光る演出を入れたりすることもできるようですし、いくつかのエフェクトを複合することもできます。
ズームや半透明はよく使いますが、白黒画像、セピア画像、ぼかし画像は今後使っていきたいと思いました。

また、もう少し調べてみようと思いますが、IEでも問題なく使えれば、白黒画像、セピア画像はマウスオーバーに限らず画像をおしゃれに見せる演出として使えそうです。

参考にさせていただいたサイト
NxWorld様　CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15　http://www.nxworld.net/tips/css-image-hover-effects.html

CSSの小技 その7
今回は「nth-child()で要素の指定」です。
今までのデモページで使用していましたが、nth-child()について
もう少し掘り下げていきたいと思います。

用途

テーブルやナビゲーションや横並びなどで、何番目かの要素に特定の装飾をしたいときに、
今までですとclassを加えて装飾していましたが、nth-child()を使うことで便利に、かつ綺麗なソースで構築する事が出来ます。

実装方法

今回は前回使ったナビゲーションで説明します。
ナビゲーションの順番によって要素の色を変更し、1番左の要素の横幅を半分にします。
ひとつ目の要素はfirst-childで指定することも出来ます。
CSSは下の方に記述しています。

HTML

<nav>
	<ul>
		<li><a href="#">HOME<span>ホーム</span></a></li>
		<li><a href="#">SERVICE<span>サービス</span></a></li>
		<li><a href="#">ABOUT US<span>企業概要</span></a></li>
		<li><a href="#">SHOP LIST<span>取扱店舗一覧</span></a></li>
		<li><a href="#">CONTACT US<span>お問い合わせ</span></a></li>
	</ul>
</nav>

CSS

nav {
	margin-top: 50px;
}

ul {
	margin: 0 auto;
	width: 90%;/* 横幅を%で指定 */
	text-align: center;
	display: flex;
	display: -webkit-flex;
}

ul li {
	font-size: 14px;
	flex: 2;/* 横幅の比率を指定 */
	-webkit-flex: 2;/* chrome、Safari用 */

}

ul li:first-child {
	flex: 1;/* HOMEの横幅は半分 */
	-webkit-flex: 1;/* chrome、Safari用 */
}

ul li a {
	display: block;
	padding: 1em;
}


ul li a {
	color: #FFFFFF;
	text-decoration: none;
}

ul li a:hover {
	background: #CCCCCC;
	color: #000000;
	text-decoration: underline;
}

ul li a span {
	display: block;
	font-size: 11px;
}

 /* nth-child()で順番ごとに指定 */

ul li:first-child {
	background: #999999;
}

ul li:nth-child(2) {
	background: #777777;
}

ul li:nth-child(3) {
	background: #555555;
}

ul li:nth-child(4) {
	background: #333333;
}

ul li:nth-child(5) {
	background: #111111;
}

奇数行、偶数行に指定する

テーブルで奇数行と偶数行で色を変えたりすることが良くあります。
行がたくさんある場合やプログラム等で動的に行数が増える場合に全て設定するのは大変です。
そこでnth-child()の括弧内をodd（奇数行）、even（偶数行）とし、それぞれ装飾することが出来ます。

HTML

<table>
	<tr>
		<th>商品名</th>
		<th>価格</th>
		<th>重さ</th>
	</tr>
	<tr>
		<th>りんご</th>
		<td>100円</td>
		<td>300g</td>
	</tr>
	<tr>
		<th>みかん</th>
		<td>50円</td>
		<td>100g</td>
	</tr>
	<tr>
		<th>梨</th>
		<td>80円</td>
		<td>350g</td>
	</tr>
	<tr>
		<th>グレープフルーツ</th>
		<td>150円</td>
		<td>380g</td>
	</tr>
	<tr>
		<th>キウイ</th>
		<td>100円</td>
		<td>120g</td>
	</tr>
	<tr>
		<th>パパイヤ</th>
		<td>300円</td>
		<td>250g</td>
	</tr>
	<tr>
		<th>マンゴー</th>
		<td>600円</td>
		<td>320g</td>
	</tr>
</table>

CSS

table {
	margin: 50px;
}

tr {

}

th {
	background: #333333;
	border: 1px #CCCCCC solid;
	color: #FFFFFF;
	font-size: 14px;
	width: 10em;
	padding: 1em;
}

td {
	border: 1px #CCCCCC solid;
	font-size: 14px;
	width: 10em;
	padding: 1em;
	text-align: right;
}


/* 奇数行、偶数行の設定 */

tr:nth-child(odd) {
	background: #999999;
}

tr:nth-child(even) {
	background: #EEEEEE;
}

他にも

3番目以降全てを指定する場合：nth-child(n+3)
3番目までを指定する場合：nth-child(-n+3)
1番目と3の倍数（3,6,9）を指定する場合：nth-child(3n+1)
最後の要素を指定する場合：nth-last-child(1)
最後からn番目の要素を指定する場合：nth-last-child(n)
とnと数字の組み合わせでいろいろと指定することが出来ます。
classを細く設定してソースが汚くなってしまうこと無くマークアップ出来るのは技術者としても気持ちが良いです。