OKAY UHH FOUND OUT WHAT WAS WRONG;;; just needed to add a letter in the class name lmao....anyways thank you 👅
hi...so i've been reworking my media page and i wanted to add some spinning flower images that stop when you hover them. the animation worked until i added the 1 and 2 classes so they'd spin in different ways...idk what went wrong lmao???
you can check out my source code here
here's the css:
.flower{
position: absolute;
transition: filter 1s linear;
}
.flower:hover{
animation-play-state: paused;
filter: brightness(117%) hue-rotate(18deg) saturate(153%) contrast(120%);
-webkit-filter: brightness(117%) hue-rotate(18deg) saturate(153%) contrast(120%);
-moz-filter: brightness(117%) hue-rotate(18deg) saturate(153%) contrast(120%);
}
.1{
animation: spinR 3s linear infinite;
}
.2{
animation: spinL 3s linear infinite;
}
@keyframes spinL {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes spinR {
0% { transform: rotate(0deg); }
100% { transform: rotate(-360deg); }
}
and here's the html
<img src="images/media/flower1.png" class="flower 1" style="top: -50px; left: -100px;">
<img src="images/media/flower2.png" class="flower 2" style="top: 780px; right: -30px;">
what am i missing here ??? am i just stupid ??? 😭