css maskプロパティを使って画像をマスクする

css

前回、やったbackground-clipでは画像をテキストの形でクリッピングしましたが、今回はcssのmask-imageを使って画像を別の画像でマスクしてみます。
テキストと違って、自由な形でマスク出来るので色々と試してみましょう。



マスク用の画像をsvgで作成します。


cssのmask-imageを使って、画像にマスクをかけます。



 

<div class="main-visual">
<img src="img/unsplash.jpg" alt="">
</div>

 

ベンダープレフィックスを忘れないように

.main-visual{
margin: 100px auto;
max-width: 960px;
height: 400px;
}
img{
object-fit: cover;
width: 100%;
height: 100%;
-webkit-mask-image: url(img/mask.svg);
-webkit-mask-repeat: no-repeat;
mask-image: url(img/mask.svg);
mask-repeat: no-repeat;
}

サイトをアニメーションで見せる

www.awesomescreenshot.com

 

や