REDLINE MAGAZINE

このページは　CSS3 background-blend-modeを試してみた　のサンプルページです。

background-blend-mode hoverサンプル その2

このサンプルのHTML

#sample a{
	display:block;
	width:200px;
	height:200px;
	background:#aaa url(blend/i_03.jpg) no-repeat;
	background-blend-mode:multiply;
	text-indent:-9999px;
	}
#sample a:hover{
	background-blend-mode:hard-light;
	}
  
/*　個別にhover時のブレンド効果を変えたい時　*/	
/*#banner01 a:hover{background-blend-mode:lighten;}
#banner02 a:hover{background-blend-mode:soft-light;}
#banner03 a:hover{background-blend-mode:darken;}
#banner04 a:hover{background-blend-mode:hard-light;}	*/ 

このサンプルのHTML

<ul id="sample">
<li id="banner01"><a href="#">バナー1</a></li>
<li id="banner02"><a href="#">バナー2</a></li>
<li id="banner03"><a href="#">バナー3</a></li>
<li id="banner04"><a href="#">バナー4</a></li>
</ul>