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

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

#1

Hey

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
</ul>

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?

Thanks


#2

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


#3

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.


#4

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


#5

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.


#6

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,
https://www.w3schools.com/jquery/event_hover.asp