Hi!
I need to create an effect in html using css where a part of the graphic is revealed using a wipe with a gradient transition (without a sharp edge).
I used a css mask for it, but even though it works perfectly in the Chrome browser, it doesn’t in the HTML producer. (Tested in 2.4.0)
Is there any way to achieve this effect (soft wipe) that would also work in HTML producer?
<style>
.masked {
position: absolute; width: 960px; height: 540px;
mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 100%);
mask-size: 100% 200%;
mask-repeat: no-repeat;
animation: clip-fade 500ms 0s ease-in-out both ;
}
@keyframes clip-fade {
0% {
mask-position: 0px 540px;
}
100% {
mask-position: 0px -400px;
}
}
</style>
<body>
<div class="masked">
<img src="../Images/Podklady/Hriste_Fotbal.png" />
</div>
</body>