Hover/Transform Issue

HTML-CSS
#1

Applied Visual Design: Use the CSS Transform scale Property to Scale an Element on Hover
https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover

This seemed like a pretty straightforward exercise -
add :hover to the div -
add transform: scale(1.1); to the styling and that’s it!
But no, something is amiss and I don’t see what it might be.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div:hover {
            width: 70%;
            height: 100px;
            margin: 50px auto;
            background: linear-gradient(53deg,
                    /* #ccfffc, */
                    #ffcccf);
            transform: scale(1.1);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>
#2

If you style it separately like this it should pass

 div:hover {            
            transform:  ;
}
#3

You’re right - that did the trick. My observations for what it’s worth - you are targeting the div twice here with each target using a set of curly brackets. Kinda inefficient - I can’t see why you couldn’t just place the transform function within the the first div at the top. It’s one of those arbitrary things I guess - hover requires it’s own target and single line of code.

#4

No, hover does not require only a single line of code. What you were trying to do originally was not what the challenge asked for and thus the test would not accept it.

Add a CSS rule for the hover state of the div...

The test wanted you to add a new rule for :hover. Once you did that then you passed.

Or maybe I misunderstood you and when you said “hover requires it’s own target and single line of code” you meant “the test requires hover to be a separate rule”? In that case, you are correct.

Because you want the transform to happen on mouse hover BUT you want all of those other properties to be there even without mouse hover. The way you originally had it, all of those properties would only be there on mouse hover.

#5

That makes perfect sense - I get it now - thanks.