Use the CSS Transform scale Property to Scale an Element on Hover2

Tell us what’s happening:
I managed to figure this one out but when I went to get a hint I found a stub article. When I clicked the link to expand the article I got a Github 404 error. When I went to click the quick style guide link I got redirected to the FCC Git home page.

How do I add a hint for this challenge, and shouldn’t that quick style link point to the actual quick style guide?

Oh, and a question related to this challenge. Why does div:hover {} need to be on its own outside the rest of the div style specifications in the declaration block?

Your code so far


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

  div:hover {
      transform: scale(1.1);
    }
  
</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/76.0.3809.132 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/

Because is a pseudo-class used to define a special state of an element
https://www.w3schools.com/css/css_pseudo_classes.asp

2 Likes

actually this is about the sudo classes like, :hover, :focus, etc. you can read more about it on (https://www.w3schools.com/css/css_pseudo_classes.asp) its a good source to learn basic things :slight_smile:

in the second part it’s about scaling the element and in this CSS it is scale: 1.1 it is making the element 1.1 times bigger than the original one :slight_smile:

because we need to apply scale: 1.1 on the :hover of the div :slight_smile:

The guides are being transferred to forum posts, they should all work once the site updates (whenever that is). Here is the guide link [has spoiler]

1 Like