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.
Após fazer login no servidor, é preciso acessar a pasta css, pelo seguinte caminho: /var/www/template/master/css, baixando o arquivo style.css
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:
Para aplicar o efeito, será preciso deixar os dois blocos desta maneira:
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
