Applied Visual Design: Use the CSS Transform scale Property to Scale an Element on Hover

Hello all!

Anyway, my question is for when using hover, is the visual effect limited on browsers?
I’m using chrome and it doesn’t show, while changing to firefox it does.

Is there anyway to check compatibility with browsers quick?

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

<div></div>

Are you using CSS? If so, then that syntax does not fly in CSS.

You cannot nest in plain CSS like you can in a preprocessor. If you don’t know what they are, then no worries either.

This is not related to a browser, but to the way you have written this css.

  div { 
    width: 70%;
    height: 100px;
    margin:  50px auto;
    background: linear-gradient(
      53deg,
      #ccfffc,
      #ffcccf
    );
} /* Add a closing bracket to the div here */
    div:hover {
      transform: scale(1.1);
    }
  /* Remove this closing bracket } */
1 Like

Also, to answer your question about browser compatibility, yes - there is a way to check that sort of thing. I find the most reliable site is the MDN Web Documentation. Click here for the hover documentation. (Scroll all the way to the bottom of the docs to see browser implementations.)

1 Like

Thanks! Since it passed the validation but didn’t show change, I was wondering what I did wrong. I find it very difficult to see the details that make a difference, thanks again.