Rotate image on hover

Question

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>

you probably need to set a transform origin to 50% 50% if you want to rotate in place — Ji aSH
– Ji aSH, Commented Jun 11, 2022 at 11:37

Maro · Accepted Answer · 2022-06-11 12:13:31Z

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>

Always use the snippet tool for js/css/html questions and answers. Please edit.
Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

dita lubis · Accepted Answer · 2022-06-11 12:00:47Z

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 class="bg-bean"> <img src="https://via.placeholder.com/150x150.png"> </div>

Uttam Nath · Accepted Answer · 2022-06-11 12:15:09Z

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

Collectives™ on Stack Overflow

Rotate image on hover

3 Answers 3

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Related