prevent flickering when zooming and moving left on hover

Question

I need to move a picture left and zoom it when hovering over it, but I see an annoying flickering.

This is my html and css:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title></title>

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-2.2.4/dt-1.10.13/b-1.2.4/b-html5-1.2.4/fh-3.1.2/datatables.min.css"/>
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-2.2.4/dt-1.10.13/b-1.2.4/b-html5-1.2.4/fh-3.1.2/datatables.min.js"></script>
    <style type="text/css">
        * {
            box-sizing: border-box;
        }

        th.dt-center, td.dt-center {
            text-align: center;
        }
        .zoom {
            transition: transform .2s;
            width: 200px;
            height: 200px;
            margin: 0 auto;
        }

        .zoom:hover {
            transform: scale(2);
            margin-left: -50px;
        }


        thead input {
            width: 100%;
        }

        tfoot {
            display: none;
        }

        img.thumb {
            max-width: 70px;
            max-height: 90px;
        }

    </style>

</head>
<body>


    <br>
    <table class="display" id="products_table-id">
        <thead>
        <tr>
            <th>#</th>

                <th>status</th>

                <th>product_id</th>

                <th>brand (raw)</th>

                <th>name</th>

                <th>price</th>

                <th>image url</th>

                <th>is duplicate</th>

        </tr>
        </thead>
        <tfoot>
        <tr>
            <th>#</th>

                <th>status</th>

                <th>product_id</th>

                <th>brand (raw)</th>

                <th>name</th>

                <th>price</th>

                <th>image url</th>

                <th>is duplicate</th>

        </tr>
        </tfoot>
        <tbody>

            <tr>
                <td>1</td>
                <td>1</td>
                <td><a target="_blank" href=""> 401072</a></td>
                <td>Aquage</td>
                <td></td>
                <td>5999.0</td>
                <td><img class="zoom" alt="" src="https://s3.amazonaws.com/uscimageurls/6002/401072.jpeg"/></td>
                <td>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

I tried to fix it using this answer but to no avail so far. What do I do wrong?

Remove the `margin-left: -50px;` from the `.zoom:hover` style. Why is it there? on hover you are scaling it and moving it -50px left at the same time, which with the cursor on the edges of the img make it flicker — zgood, Mar 26 '19 at 19:23
I need it in order to move the image left. is there a better option? — Max Segal, Mar 26 '19 at 19:26
Yes use `translateX` instead, you will probably have better results — zgood, Mar 26 '19 at 19:46

zgood · Accepted Answer · 2019-03-26T19:54:20.827

Remove the margin-left: -50px; and replace it with a translateX(-50px);.

Moving an element with a negative margin will actually move that DOM element. so when you hover, your img scales up and moves to left -50px... so the img you were hovering you are no longer hovering because it has moved 50px to the left. so then the hover styles stop being applied... then it goes back to it original position. But now you are hovering it again, so it moves -50px left, now you are not hovering, etc etc. This is your flicker loop.

Translate on the other hand will like make a "ghost" copy and make it appear it has move -50px, but the DOM element is still in place... so its still hovered even though it has appeared to move -50px left.

Change this:

.zoom:hover {
        transform: scale(2);
        margin-left: -50px;
    }

To this:

.zoom:hover {
        transform: scale(2) translateX(-50px);
    }

* {
            box-sizing: border-box;
        }

        th.dt-center, td.dt-center {
            text-align: center;
        }
        .zoom {
            transition: transform .2s;
            width: 200px;
            height: 200px;
            margin: 0 auto;
        }

        .zoom:hover {
            transform: scale(2) translateX(-50px);
        }


        thead input {
            width: 100%;
        }

        tfoot {
            display: none;
        }

        img.thumb {
            max-width: 70px;
            max-height: 90px;
        }

<br>
    <table class="display" id="products_table-id">
        <thead>
        <tr>
            <th>#</th>

                <th>status</th>

                <th>product_id</th>

                <th>brand (raw)</th>

                <th>name</th>

                <th>price</th>

                <th>image url</th>

                <th>is duplicate</th>

        </tr>
        </thead>
        <tfoot>
        <tr>
            <th>#</th>

                <th>status</th>

                <th>product_id</th>

                <th>brand (raw)</th>

                <th>name</th>

                <th>price</th>

                <th>image url</th>

                <th>is duplicate</th>

        </tr>
        </tfoot>
        <tbody>

            <tr>
                <td>1</td>
                <td>1</td>
                <td><a target="_blank" href=""> 401072</a></td>
                <td>Aquage</td>
                <td></td>
                <td>5999.0</td>
                <td><img class="zoom" alt="" src="https://s3.amazonaws.com/uscimageurls/6002/401072.jpeg"/></td>
                <td>
                </td>
            </tr>
        </tbody>
    </table>

prevent flickering when zooming and moving left on hover

1 Answers1