Getting Line to only move To one direction using scale. CSS

November 5, 2022

hr:hover {
transform:scaleX(50.0);
}

CSS when Hover

hr 
{  
position: absolute;
transition: transform 1.5s ease-out;
width: 3%;  
height: 3px;  
background-color: white;      
margin-left: 20%;  
margin-top: 10%; 
}

CSS of Line

So Can I scale it Just to go left horizontal? Right now when I hover it goes both ways.
And can I add a class name to my HR so I can have multiple?

Ok i fixed calling out a class name with hr

.line
{
content: normal;  
position: absolute;
transition: transform 1.5s ease-out;
width: 10%;  
height: 5px;  
background-color: white;      
margin-left: 20%;  
margin-top: 10%; 
}

Still cant seem to get to only scale left.

>Solution :

You should be able to control the scale direction by setting the transform-origin property.

The transform origin is the point from where transform values are calculated from, so setting the point to the far right forces the scale to move left, so to speak.

And yeah, you can add a class to the hr element:

<hr class="divider" />

.divider:hover {
  transform:scaleX(50.0);
}
.divider {
  position: absolute;
  transition: transform 1.5s ease-out;
  width: 3%;
  height: 3px;
  background-color: white;
  margin-left: 20%;
  margin-top: 10%;

  /*
    Control the scale direction
    by defining the origin:
  */
  transform-origin: center right;
}