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

HTML-CSS
1

Tell us what’s happening:

div { width: 70%; height: 100px; margin: 50px auto; background: linear-gradient( 53deg, #ccfffc, #ffcccf ); p:hover { transform: scale(2.1); }
**Your code so far** 

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

<div></div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; 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

3

so you want to scale the div element right?
Why are you scaling the p:hover then?

just a hint. Hopefully will help…

4

I Just tried the div element still the same issue.

5

well that is good. Show us the new code! :smile:

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

ok so now you are adding a div:hover but does the challenge ask for that?
All they want is for you to scale the div …

8

how do I go about that please?
I’m still hanging.

11

this is the original code you were given:

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

Do you see how they specified the width for the div? They also specified the height, the margin and the background. So, given all these examples of how to specify an attribute for the div, can you add another attribute for the required scaling?

12

It is still not running.

13

ok what is your latest code now? pls paste it in

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

oops, my bad! They actually did want it to be shown on hover.
So just move that line transform into a separate section under div:hover
(you almost had the correct answer earlier but the only problem was your div:hover was nested under the div selector that time).

sorry!

16

oh and watch out for spaces. You want this:
div:hover
not
div :hover

1 Like
17

I have the same problem.
My code right now is -->

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

I does nor work.

18

you have a typo. “transform” not “transfrom”

1 Like
19

That was funny! Thank you!

1 Like