Why am I wrong here

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**

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



</style>

<div></div>
  **Your browser information:**

User Agent is: Mozilla/5.0 (Linux; Android 6.0; CAM-TL00) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Mobile Safari/537.36

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

Link to the challenge:

Hello @RealLeon,

If it doesn’t work it is because you added the pseudo class to the selector div which already exist. They want you to add a CSS rule for the pseudo class hover such as:

div {
  ...
}
div:hover {
  ...
}
2 Likes

You have styled ONLY the hover state of the [div] in which case the div won’t be visible unless hovered over.

<style>
  /*for the div to be visible*/

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

/*applies this property as an addition to the already existing styes above when hovered over*/

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

</style>
<div></div>

It is extremely useless to give directly the answer. Give clues and directions is the best help for learners. Also, as you gave the entire answer for the challenge you should use the spoiler /spoiler tags around the code.

2 Likes

I am new on the forum. I will do it the way you said from now on.

1 Like

I did the same at start. We told me, I tell you :wink:

2 Likes

I think I just made this mistake else where too, also new contributor… so I hope you feel better not being the only one!

:sweat_smile:

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.