Discover the power of CSS3 with our widget that includes animated images. Transform your website into a dynamic and interactive platform that captivates visitors
HTML Code
<div class="container">
<div class="widget-box">
<div class="img1">
<img decoding="async" src="https://i.pinimg.com/564x/22/d9/fe/22d9fe458b65dc6845785b98b12bfb42.jpg" alt="#">
</div>
<div class="img2">
<img decoding="async" width="200" src="https://i.pinimg.com/736x/5d/30/a8/5d30a82bfca879f5bd03e145c7e9bbfe.jpg" alt="#">
</div>
</div>
</div>
CSS Code
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container{
display: flex;
justify-content: center;
text-align: center;
padding-top: 50px;
}
.widget-box{
position: relative;
}
.widget-box .img1 img{
border-radius: 20px;
}
.widget-box .img2 {
display: inline-block;
mask-image: url("https://www.wavypoint.com/assets/files/2024-06-16/1718579662-168136-44.png");
mask-size: 100% 100%;
background-color: white;
position: absolute;
left: -20%;
top: 10%;
padding: 10px;
animation: jumpReverseAni 4s linear infinite;
}
.widget-box .img2 img{
mask-image: url("https://www.wavypoint.com/assets/files/2024-06-16/1718579662-168136-44.png");
mask-size: 100% 100%;
}
@keyframes jumpReverseAni {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
