2

Olá;

Estou tendo um projeto do Técnico, e nele tem uma lista de jogos, quero fazer que quando passe o mouse por cima a imagem aumente, com isso tenho o seguinte:

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>
');

Mas quando a imagem aumenta, o resto das outras imagens quebram, e ficam todas tortas. O que posso fazer para arrumar isso?

1 Resposta 1

0

Não precisa de JavaScript para isso. Pode usar o scale() do CSS com :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">

Coloque uma classe específica para isso na imagem (no exemplo, criei a classe .zoom). Como você quer que a imagem aumente 10%, logo o valor do scale será 1.1.

O scale aumenta (ou reduz) o elemento sem alterar a área que ele ocupa na página, portanto, não irá afetar a disposição dos outros elementos próximos.

Se quiser colocar um efeito suave, pode usar 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">

Uma boa documentação sobre o transition você encontra aqui. Veja também sobre o scale() neste link.

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .