How to rotate and scale a picture when hover?

Question

I can't figure out how to rotate and scale a .png at once when the user hovers above it. Right now it scales only when I hover on the picture. I know that scale overwrites the first tranform but I can't figure out how to solve this. I don't think @keyframes are right in this case, because the picture doesn't move from one place to another, or am I wrong? And when I stop hovering it gets bigger again. Without rotating.

Thank you in advance.

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="CSS/stylesheet-7.css"/>
    </head>
    <body>
        <div class="circle">
            <img src="Images/hypnotic.png">
        </div>
    </body>
</html>

Stylesheet:

html    {
        background: ##99ccff;
        }
.circle img {
            transition: 6s;
            }
.circle img:hover   {
                    transform: rotate(720deg);
                    transform: scale(0.3);
                    }

score 1 · Accepted Answer · answered Sep 23 '18 at 20:30

1

You can define transform only once. Now the latest definition is overwriting the one that rotates. Just put both effects using a single transform.

html {
  background: ##99ccff;
}

.circle img {
  transition: 6s;
}

.circle img:hover {
  transform: scale(0.3) rotate(720deg);
}

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

answered Sep 23 '18 at 20:30

Gerard

15,418
5
30
52

This is exactly the solution I wanted! Can you maybe tell me if it's possible that when the picture scales down to size 0.3 that it stays in this size even when I do not hover above the picture anymore? – Hip Sep 23 '18 at 20:34
@Hip Not using animations this way. You would have to look into keyframes – Gerard Sep 23 '18 at 20:36

score 1 · Answer 2 · answered Sep 23 '18 at 20:30

1

You are trying to override the transform rules for your images, because you are calling them one after another. Try transform: scale(0.3) rotate(720deg); instead of transform: rotate(720deg); transform: scale(0.3); Hope that helps

answered Sep 23 '18 at 20:30

Vorbert

31
6

This would just case that the rotation overwrites the scale. – Hip Sep 23 '18 at 20:32
1

No, here I'm applying 2 different states of the transform to the rule itself, so 'transform knows' that I want to do the rotation and scaling, not to override one with another. – Vorbert Sep 23 '18 at 20:40
Oh, I see now. I have just understood it the wrong way before. Thank you. – Hip Sep 24 '18 at 16:25
@Hip No problem :) – Vorbert Sep 24 '18 at 17:19

How to rotate and scale a picture when hover?

2 Answers2