I have observed that the transform works fine, but there is a slight issue when initially hovering or touching the image. After the first touch or hover, everything works great. Any assistance on fixing this minor issue would be greatly appreciated. Thank you in advance.
body {
background: #000000;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.hoverChange:hover {
content: url("https://i.postimg.cc/CL7mTV8p/monster.png");
width: 100%;
-moz-transform: scale(2.2) rotatez(-5deg);
-webkit-transform: scale(2.2) rotatez(-5deg);
-o-transform: scale(2.2) rotatez(-5deg);
-ms-transform: scale(2.2) rotatez(-5deg);
transform: scale(2.2) rotatez(-5deg);
cursor: crosshair;
-webkit-transition: .7s;
-moz-transition: .7s;
-o-transition: .7s;
-ms-transition: .7s;
transition: .7s;
translate: -100px -100px;
/* When the animation is finished, start again */
animation-iteration-count: infinite;
}
.avatar {
transform: translatey(0px);
animation: float 5s ease-in-out infinite;
}
.avatar {
transform: translatey(0px);
animation: float 5s ease-in-out infinite;
}
@keyframes float {
0% {
transform: translatey(0px);
}
50% {
transform: translatey(-15px);
}
100% {
transform: translatey(0px);
}
} <div class="col-sm-8 col-md-6 monster mb-5" data-animation="slideInLeft"
style="background-image: url(https://i.postimg.cc/NjPDF7bN/photo-1620207418302-439b387441b0.jpg)" ;>
<div class="px-5 hoverChange px-sm-0"><img
src="https://i.postimg.cc/vmk0qLV1/Web-Development-Promotion-Instagram-Post.png"
class="smallBorder avatar" width="100%"></img></div>
</div>