Scale on hover

Mihaela Kawinska

• July 05, 2023 11:17

Hey,

This is the block I have https://prnt.sc/6o-YC_AZjdyH

This is the CSS code that I use:
element:hover {
 transition: all .2s ease-in-out;
    transform: scale(1.05, 1.05);
    cursor: pointer;
    z-index: 1;
}

The question is why the out transition is not working. I tested it with inspect elements and was working

Thank you in advance.

0

• 

  KC George

  • July 05, 2023 12:29

  Hi Mihaela,

  I have added your code to the three columns on this page and the columns scale up on hover. https://brizytest.online/scale-on-hover/

  Can you share the URL of the page where you have added this code?

  0
• 

  Mihaela Kawinska

  • July 06, 2023 09:35

  Hi George,
  
  The block scales fine, the problem is with the block going back to its original state after I move the mouse. She is very abrupt.
  What I wouldn't try doesn't help.
  
  You can see it in your example too.

  0
• 

  KC George

  • July 06, 2023 12:15

  Hi Mihaela,

  Please try this code. You can see the test page here. https://brizytest.online/scale-on-hover/

  element {
    transition: all .2s ease-in-out;
    transform: scale(1, 1);
  }
  
  element:hover {
    /* Add hover properties */
    transform: scale(1.05, 1.05);
    cursor: pointer;
    z-index: 1;
  }

  0
• 

  Mihaela Kawinska

  • July 06, 2023 15:08

  It works! Thank you very much, George!
  Appreciate it!

  0

Please sign in to leave a comment.