Scale on hover with display:flex in a row with an a tag


There are somehing

<ul> is got display: flex;
<li><h1>test</h1></li> is got background image
<li><a href="link">link nameeeeeeeeee</a></li> link

On hover the h1 got scale 1.5 now my question next to it have a link so when got hover the h1 with background hide half of link name. With JS how can detect what scale ratio got that h1 and move the link with margin-left as is need?


You can set overflow:hidden to the li that wraps the h1, so that the scaling doesn’t go outside the li

Is good idea by the way im planning to move the scale ratio with margin-left somehow. That looks more better way ;x It seems more responsive I tthink.

margin-left of which element.? couldn’t get you

so when h1 scale then <a> html tag got the margin-left calculated from scale number or somwhow it seems easy to got what i want but maybe not that easy.

Then you must set the hover and the margin value via js and then based on the margin value set the css() method for scaling on the element,
Maybe this might spark an idea for you,