Rotate image on hover-CodePudding

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 >
  <img src="https://placekitten.com/200/300" >
</div>

CodePudding user response：

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 >
    <img src="stylesimages/bean.png" width="100px" height="100px" >
</div>

CodePudding user response：

Is this what you mean? I change the html just for testing purposes, and I added some comment in the code that I have changed.

.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));
}

.bg-bean img {
    transform: translate(48%, -40%) rotate(0deg); /* I changed this */
    transition: transform .7s ease-in-out; /* I moved this */
}

.bg-bean:hover img {
    transform: translate(0) rotate(360deg); /* I changed this */
}

<div >
    <img src="https://via.placeholder.com/150x150.png">
</div>

CodePudding user response：

img {
    transition: transform .7s ease-in-out;
}

img:hover {
    transform: rotate(360deg);
}

<div>
    <img src="https://s3.amazonaws.com/www-inside-design/uploads/2020/10/aspect-ratios-blogpost-1x1-1.png" width="100px" height="100px">
</div>

on image CSS add transition: transform .7s ease-in-out;.
on image hover CSS add transform: rotate(360deg);.