Rotate image on hover

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

Leave a Reply

(*) Required, Your email will not be published