Just rename <div class ="spin-image"> to <div class ="spin-animation">
The class of the CSS style must match the class of the HTML element.
Solution 1 :
Solution 2 :
Please check for other affecting factors. Your code is working just fine:
.spin-image {
display: flex;
margin: auto;
width: auto;
height: auto;
padding-left: 200px;
transition: transform 2s ease-in-out;
}
.spin-image:hover {
transform: rotate(360deg);
}<div class ="different__box">
<div class ="different__border"></div>
<div class ="different__right-background">
<div class ="spin-image">
<img class="different__image-right" src ="https://picsum.photos/200/200"/>
</div>
</div>
</div>Problem :
I’m just doing a simple CSS/HTML spin animation for an image and when I hover on the image, it won’t spin. I put the pseudo-class element in CSS already.
Any idea what I’m doing wrong?
This is the CSS
.spin-image {
display: flex;
margin: auto;
width: auto;
height: auto;
padding-left: 200px;
transition: transform 2s ease-in-out;
}
.spin-image:hover {
transform: rotate(360deg);
} <div class ="different__box">
<div class ="different__border"></div>
<div class ="different__right-background">
<div class ="spin-image">
<img class="different__image-right" src ="./coffee-shop-assets/tiltedcan.png"/>
</div>
</div>
</div>Comments
Comment posted by Sérgio Moreira Filho
It seems the base code has been edited. This is correct now.