por Shek Dom 20 Ago 2017 - 15:07
| | Efeito zoom nas imagens com lupa |
| |
Neste tutorial estaremos a lhe ensinar a usar uma função de lupa em suas imagens nos tópicos criados por você ou membros de teu fórum. Com esta função ao parar o mouse sobre a imagem do tópico o mesmo entrará na função de zoom como uma lupa.
Efeito zoom nas imagens com lupa Tutoriais, dicas e astúcias |
Aplicação do código CSSCSS na verdade significa "Cascading Style Sheets", sua principal função é personalizar um determinado conteúdo exibido, em um determinado lugar na página. Cada versão de fórum (phpbb2. phpbb3, punbb e invision) possuem uma classe diferente, e nessas classes podem ser adicionadas as “propriedades”. Caso queira conhecer alguns tipos de classes, poderá consultar mais informações no seguinte: Elaborar um código CSS
Painel de controle Visualização Imagens e Cores Cores Folha de estilo CSS |
| Salvar CSS- Salva todo o CSS em arquivo TXT em seu computador. Em outras palavras, permite criar um backup de seu CSS personalizado. |
| Forçar CSS base do fórum - Força o CSS padrão da versão de seu fórum, ignorando o CSS personalizado. Caso queira verificar o CSS base d fórum, basta clicar no link "Ver CSS base do fórum". |
| Desativar o CSS base - Desativa o CSS base da versão de seu fórum, e permite que somente o CSS personalizado do fórum opere em todo o fórum. |
| Melhorar CSS - Com essa função ativa, a capacidade de carregamento da página é aumentada, facilitando a navegação nas páginas de seu fórum. Mas é importante lembrar que, para que a função funcione normalmente como prometida, você terá que adicionar o código correto na folha de estilo. |
Código disponível para cada versão de fórumEm seguida, aplique o código destinado a sua versão de fórum. Poderá consultar a versão acessando a aba Visualização do seu Painel de Controle.
| PHPBB3 |
- Código:
.postbody .content img:hover { cursor: url('http://icons.iconarchive.com/icons/gakuseisean/ivista-2/32/Start-Menu-Search-icon.png'), auto; max-width: 100%; } .postbody .content img { max-width: 250px; transition: all ease-out .2s; }
| PHPBB2 |
- Código:
.postbody img:hover { cursor: url('http://icons.iconarchive.com/icons/gakuseisean/ivista-2/32/Start-Menu-Search-icon.png'), auto; max-width: 100%; } .postbody img { max-width: 250px; transition: all ease-out .2s; }
| PUNBB |
- Código:
.entry-content img:hover { cursor: url('http://icons.iconarchive.com/icons/gakuseisean/ivista-2/32/Start-Menu-Search-icon.png'), auto; max-width: 100%; } .entry-content img { max-width: 250px; transition: all ease-out .2s; }
| INVISION |
- Código:
.post-entry img:hover { cursor: url('http://icons.iconarchive.com/icons/gakuseisean/ivista-2/32/Start-Menu-Search-icon.png'), auto; max-width: 100%; } .post-entry img { max-width: 250px; transition: all ease-out .2s; }
Efeito zoom nas imagens com lupa Tutoriais, dicas e astúcias |
Dúvidas gerais- O que fazer quando o efeito não funcionar?;
Talvez o servidor de imagens icofinder não está mais alojando a imagem da lupa. Você pode pesquisar por imagens no Google e substituir a imagem "//icons.iconarchive.com/icons/gakuseisean/ivista-2/32/Start-Menu-Search-icon.png" pela imagem da LUPA desejada;
- Resultado da operação;
|