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>