locked
Image transition size overlay surrounding elements RRS feed

  • Question

  • User-1826049516 posted

    Hi,

    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:

    https://jsfiddle.net/34Lxofqd/1/

    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.

    Thanks

    Thursday, March 14, 2019 4:00 PM

Answers

All replies

  • User753101303 posted

    Hi,

    I would use something such ashttps://jsfiddle.net/vhy7q3mz/1/ which does just an image scaling.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, March 14, 2019 7:12 PM
  • User839733648 posted

    Hi ldoodle,

    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. 

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            body {
                font-family: arial;
            }
            div {
                line-height: 50px;
            }
            img {
                transition: all .5s;
                height: 46px;
                width: 136px;         
                vertical-align: middle;
                z-index: 999;
            }
    
                img:hover {
                    transform: scale(2.5);
                }
        </style>
    </head>
    <body>
        <div>
            <img src="https://www.google.co.uk/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
            <span style="" title="Test">The quick brown fox jumps over the lazy dog.</span>
        </div>
        <div>
            new line 1
        </div>
        <div>
            new line 2
        </div>
    </body>
    </html>

    result:

    Best Regards,

    Jenifer

    Friday, March 15, 2019 6:36 AM
  • User-1826049516 posted

    Thanks!

    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.

    https://jsfiddle.net/p462bvdn/

    Friday, March 15, 2019 1:57 PM
  • User-1826049516 posted

    Don't worry about borders - doesn't seem possible.

    Got around it by using box shadow instead, which renders quite sleekly when scaling.

    Saturday, March 16, 2019 3:58 PM
  • User-1826049516 posted

    Hi Patrice

    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.

    https://jsfiddle.net/xh0np9r6/1/

    Wednesday, March 20, 2019 5:20 PM