ホバーした時に透過させる方法

2017/06/22

画像などにホバーした時、透過させるにはopacityプロパティを利用します。色が薄くなることで「クリックできる」ということをユーザーに伝えられますね。

サンプルコード

opacityには0(透明)〜1(不透明)の間で透明度を指定します。0.5を指定すると半透明になります。

img:hover {
	opacity: 0.5 ;
}

デモ

opacity

opacityプロパティに0〜1の数値を指定します。0が完全透明で、1が完全不透明です。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
		img:hover {
			opacity: 0.5 ;
		}
	</style>
</head>
<body>
	<p>ホバーすると透過します。</p>

	<img src="/author.svg" width="150" height="150">
</body>
</html>

transition

transitionプロパティと組み合わせれば、ゆっくりと透過させられます。下記は、1.0s(1秒)かける例です。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
		img {
			transition: 1.0s ;
		}

		img:hover {
			opacity: 0.5 ;
		}
	</style>
</head>
<body>
	<p>ホバーすると1秒かけて透過します。</p>

	<img src="/author.svg" width="150" height="150">
</body>
</html>

サンプルコード

デモ

opacity

transition

関連記事