Adicionando zoom ao passar o mouse pela imagem

Para criar este efeito de zoom ao passar o mouse pela imagem, podemos utilizar o elemento hover em CSS, e aplicar em qualquer imagem. Nesta wiki vamos aplicar para a imagem da empresa, no bloco "Sobre Nós", mas é possível aplicar para qualquer imagem. Para isso, basta acessarmos o servidor do nosso site pelo Filezilla, inserir as informações necessárias como o domínio do site ou IP no lado esquerdo, no protocolo será SFTP, o host será o domínio ou IP, caso houver porta ssh é necessário inserir, abaixo o tipo de logon será normal, usuário e senha precisa verificar as informações cadastradas que cada cliente utiliza, essas informações não são padrão.

Captura de Tela 2021-06-25 às 10.40.40.png

Após fazer login no servidor, é preciso acessar a pasta css, pelo seguinte caminho: /var/www/template/master/css, baixando o arquivo style.css

Captura de Tela 2021-06-25 às 11.38.22.png

Abrir o arquivo style.css em um editor de texto, nesta wiki utilizamos o Sublime, mas fica a sua preferência. Dentro do arquivo css é preciso teclar Ctrl + F para pesquisar e encontrar o bloco onde diz .img-empresa, para alterarmos a imagem da empresa por exemplo, caso tiver interesse em aplicar o efeito em outra imagem, basta acessar o site e no botão inspecionar e verificar a classe da imagem e pesquisar neste mesmo arquivo, original estando desta forma como apresenta a imagem abaixo:

Captura de Tela 2021-06-25 às 11.37.13.png

Para aplicar o efeito, será preciso deixar os dois blocos desta maneira:

Captura de Tela 2021-06-25 às 11.40.37.png

Os comandos adicionados e alterados estão relacionados a largura, onde no primeiro bloco a largura original da imagem está em 70%, e ao passar o mouse em cima da imagem, estará aplicando o efeito hover aplicando 100% da largura na imagem.

Código disponibilizado:

.img_empresa {

vertical-align: middle;

border-style: none;

width: 70%;

height: auto;

-moz-transition: all 0.3s;

-webkit-transition: all 0.3s;

transition: all 0.3s;

}

.img_empresa:hover {

vertical-align: middle;

border-style: none;

width: 100%;

height: auto;

-moz-transition: all 0.3s;

-webkit-transition: all 0.3s;

transition: all 0.3s;

}

Após realizar as alterações, basta salvar e substituir na mesma pasta css, acessar seu site em guia anônima para certificar-se de que não haverá cache, atualizar a página e as alterações já serão aplicadas.

-

Voltar ao Menu Hotsite