Use the CSS Transform scale Property to Scale an Element on Hover?

HTML-CSS
1

Tell us what’s happening:

Your code so far


<style>
  div: hover {  transform: scale(1.1
    );
    width: 70%;
    height: 100px;
    margin:  50px auto;
    background: linear-gradient(
      53deg,
      #ccfffc,
      #ffcccf);
     
  }
  
  
  
</style>

<div></div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover

2

Two issues:

  • div: hover is not a valid selector. There should not be a space between the colon and the pseudo-class name.

  • By simply adding the :hover pseudo-class to the existing declaration block, you’ve erased the base styles. Now those styles will all only appear when the div is hovered, yet the div is not really rendering right now since it has no content, padding, width, or height. You need to add hover styles in a new declaration block, separate from the base styles.