Javascript function breaking the image

Question

Hello;

I am having a project of the Coach, and in it has a list of games, I want to make that when you pass the mouse over the image increase, with that I have the following:

foreach ($lista as $jogo){
    echo ('
        <div class="quad-Jogo box">
            <img onmouseover="Aumenta(this)" onmouseout="Normaliza(this)" src="img/'.$jogo['imagem'].'" class="img-fluid" alt="...">
            <a href="detalharesenha.php?cod='.$jogo['cod'].'">Veja mais</a>
        </div>
    ');
}
echo ('
    <script type="text/javascript">
        function Aumenta(img){
            img.style.width = "110%";
        }
        function Normaliza(img){
            img.style.width = "100%";
        }
    </script>
');

But when the image gets bigger, the rest of the other images break, and they’re all crooked. What can I do to fix this?

Answer 1

You don’t need Javascript for this. You can use scale() of CSS with :hover:

.zoom:hover{
   -webkit-transform: scale(1.1); /* Safari */
   transform: scale(1.1);
}

<img class="zoom" width="100" src="http://www.personal.psu.edu/oeo5025/jpg.jpg">
<img width="100" src="http://www.personal.psu.edu/oeo5025/jpg.jpg">

Put a specific class for this in the image (in the example, I created the class .zoom). How do you want the image to grow 10%, then the value of scale will be 1.1.

The scale increases (or reduces) the element without changing the area it occupies on the page, so it will not affect the layout of the other next elements.

If you want to put a soft effect, you can use transition:

.zoom{
   -webkit-transition: -webkit-transform .3s ease;
   transition: transform .3s ease;

}

.zoom:hover{
   -webkit-transform: scale(1.1); /* Safari */
   transform: scale(1.1);
}

<img class="zoom" width="100" src="http://www.personal.psu.edu/oeo5025/jpg.jpg">
<img width="100" src="http://www.personal.psu.edu/oeo5025/jpg.jpg">

Good documentation on the transition you find here. See also about the scale() at this link.