<div class="cw_box">
<img src="https://d33wubrfki0l68.cloudfront.net/175114938be87ad0c1170d95e2fdaa616846eb49/d40da/images/css/masking/masking-example1.jpg" class="cw_img2">
<img src="https://d33wubrfki0l68.cloudfront.net/175114938be87ad0c1170d95e2fdaa616846eb49/d40da/images/css/masking/masking-example1.jpg" class="cw_img">
</div>
.cw_box {
position: relative;
display: inline-block;
width: 400px;
height: 600px;
}
.cw_img {
position: absolute;
top: 0;
left: 0;
-webkit-mask-image: url("https://d33wubrfki0l68.cloudfront.net/d319533ac3d22c3186498254e0caee871796a29e/d7ce9/images/css/masking/image-mask.png");
mask-image: url("https://d33wubrfki0l68.cloudfront.net/d319533ac3d22c3186498254e0caee871796a29e/d7ce9/images/css/masking/image-mask.png");
-webkit-mask-size: 200% 200%;
mask-size: 200% 200%;
width: 400px;
height: 600px;
-webkit-animation: testmove 2000ms linear infinite;
animation: testmove 2000ms linear infinite;
}
.cw_img2 {
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 600px;
-webkit-filter: contrast(200%);
filter: contrast(200%);
}
@-webkit-keyframes testmove {
0% {
-webkit-mask-position: 0px 0px;
mask-position: 0px 0px;
}
100% {
-webkit-mask-position: 18.5% 18.5%;
mask-position: 18.5% 18.5%;
}
}
@keyframes testmove {
0% {
-webkit-mask-position: 0px 0px;
mask-position: 0px 0px;
}
100% {
-webkit-mask-position: 18.5% 18.5%;
mask-position: 18.5% 18.5%;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.