Use CSS Transform scale Property to Scale an Element on Hover

Tell us what’s happening:

Your code so far


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

<div class="hover"></div>

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 5.0.2; SM-P905 Build/LRX22G) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.158 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

You’re missing this part of the specification (notated in bold)

Add a CSS rule for the hover state of the div and use the transform property to scale the div element to 1.1 times its original size when a user hovers over it.

div:hover {
transform: size(1.1);
}

2 Likes

I’ve had the hardest time figuring this out. When attempting to copy the syntax into another platform such as codepen.io, w3school, and atom. I believe due to the HTML not being present and only CSS “” it wasn’t replicating the exact syntax which made this lesson channeling for me. FOR THOSE WHO GET LOST. The below syntax is your answer.


<style>

  div { 

    width: 70%;

    height: 100px;

    margin:  50px auto;

    background: linear-gradient(

      53deg,

      #ccfffc,

      #ffcccf

    );

  

  div:hover {transform: scale(1.1);

  }

    

</style>

<div class="hover"></div>
2 Likes