[TUTORIAL] Efeito Zoom nas imagens com lupa

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

[TUTORIAL] Efeito Zoom nas imagens com lupa

Mensagem por Shek em 20/08/17, 10:07 am

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 CSS

CSS 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 Seta Branca Visualização Seta Branca Imagens e Cores Seta Branca Cores Seta Branca Folha de estilo CSS

Seta Salvar CSS- Salva todo o CSS em arquivo TXT em seu computador. Em outras palavras, permite criar um backup de seu CSS personalizado.
Seta 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".
Seta 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.
Seta 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órum

Em 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;


avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 17137
Pontos Ativos : 21398

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum