Issue
I’m trying to make this image rotate 360 degrees when it it hovered over, but it does not rotate and moves to a random location when it is hovered over.
I have tried changing its location on the page and adding a transform origin.
Any way to fix this?
.bg-bean {
color: white;
font-weight: bold;
border: none;
position: absolute;
top: 50%;
left: 45%;
transform: translate(48%, -40%);
text-align: right;
margin: 0%;
padding: 0%;
-webkit-filter: drop-shadow(20px 20px 20px rgb(0, 0, 0));
filter: drop-shadow(20px 20px 20px rgb(0, 0, 0));
transition: transform .7s ease-in-out
}
.bg-bean:hover {
transform: rotate(360deg);
}
<div class="bg-bean">
<img src="https://placekitten.com/200/300" >
</div>
Solution
try this
.bg-bean {
color: white;
font-weight: bold;
border: none;
position: absolute;
top: 50%;
left: 45%;
text-align: right;
margin: 0%;
padding: 0%;
-webkit-filter: drop-shadow(20px 20px 20px rgb(0, 0, 0));
filter: drop-shadow(20px 20px 20px rgb(0, 0, 0));
transition: all .7s ease-in-out
}
.bg-bean:hover{
transform: rotate(360deg);
}
<div class="bg-bean">
<img src="stylesimages/bean.png" width="100px" height="100px" >
</div>
Answered By – Maro
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0