background-blend-mode hoverサンプル

通常時は「luminosity」、hover時「darken」にしてみるサンプル。

サンプルリンク

通常時は「normal」、hover時「normal」にしてみるサンプル。

サンプルリンク

このサンプルのHTML

.sample a{
	display:inline-block;
	width:200px;
	background:#75c4d1 url(blend/image.jpg) no-repeat;
	border:1px solid #999;
	border-radius:6px;
	padding:206px 0 0 0;
	margin:10px;
	}

.sample1 a{background-blend-mode:luminosity;}
.sample2 a{background-blend-mode:normal;}

.sample1 a:hover{background-blend-mode:normal;}
.sample2 a:hover{background-blend-mode:darken;}

このサンプルのHTML

<p class="sample sample1"><a href="#">サンプルリンク</a></p>
<p class="sample sample2"><a href="#">サンプルリンク</a></p>