Last post Mar 20, 2019 05:20 PM by ldoodle
Mar 14, 2019 04:00 PM|ldoodle|LINK
I'm struggling with this one.
I have an image that has some text next to it and is surrounded by other elements. When the image is hovered I want the image to enlarge without affecting positioning/size of those surrounding elements.
I've tried absolute positioning the image which does most of it, but the sibling text is then hidden behind the image at the start:
What I want is the text to always start next to the image (image width is not fixed) and on hover, the image overlays the text as well i.e. does not shift it to the right.
Mar 14, 2019 07:12 PM|PatriceSc|LINK
I would use something such ashttps://jsfiddle.net/vhy7q3mz/1/ which does just an image scaling.
Mar 15, 2019 06:36 AM|Jenifer Jiang|LINK
Just as PatriceSc has suggested, you could use scale() to achieve your requirement easily.
The scale() CSS function defines a transformation that resizes an element on the 2D plane.
Because the amount of scaling is defined by a vector, it can resize the horizontal and vertical dimensions at different scales.
<meta charset="utf-8" />
transition: all .5s;
<img src="https://www.google.co.uk/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<span style="position:relative" title="Test">The quick brown fox jumps over the lazy dog.</span>
new line 1
new line 2
Mar 15, 2019 01:57 PM|ldoodle|LINK
I did look at scale but didn't know about transform-origin so it always zoomed centrally. Also, is there a way you can scale without affecting the borders - sorry I forgot to have the image with a border in the fiddle.
Mar 16, 2019 03:58 PM|ldoodle|LINK
Don't worry about borders - doesn't seem possible.
Got around it by using box shadow instead, which renders quite sleekly when scaling.
Mar 20, 2019 05:20 PM|ldoodle|LINK
I've found a glitch. With box-shadow the image jumps the the right when animation is complete in Edge and IE11 - as if the box-shadow is forcing it over. Chrome is spot on.