JavaScript function breaking image

Question

JavaScript function breaking image

Navigation

#1 by (0 votes)

2

Hello;

I'm having a Technician project, and it has a list of games in it, I want to make it when I hover over the image, so 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 increases, the rest of the other images break, and they are all crooked. What can I do to fix this?

php javascript html css

asked by anonymous 26.07.2018 / 01:16

1 answer

JWT + Spring Security without authentication Dynamically connect to an Oracle database for each JAX-RS request

score 0 · Accepted Answer

You do not 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"><imgwidth="100" src="http://www.personal.psu.edu/oeo5025/jpg.jpg">

Putaspecificclassforthisintheimage(intheexample,Icreatedtheclass.zoom).Sinceyouwanttheimagetoincrease%with%,thenthevalueof10%willbescale.

The1.1increments(orreduces)theelementwithoutchangingtheareaitoccupiesonthepage,soitwillnotaffectthelayoutoftheotherelementsnearby.

Ifyouwanttohaveasmootheffect,youcanusescale:

.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"><imgwidth="100" src="http://www.personal.psu.edu/oeo5025/jpg.jpg">

Gooddocumentationontransitionyou find it here . See also about% this link .