[TUTORIAL] Efeito Zoom nas imagens com lupa

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

Principal Contribuidor

efeito - [TUTORIAL] Efeito Zoom nas imagens com lupa Empty [TUTORIAL] Efeito Zoom nas imagens com lupa

Mensagem por Shek 20/08/17, 04:07 pm

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

efeito - [TUTORIAL] Efeito Zoom nas imagens com lupa Stylea10
efeito - [TUTORIAL] Efeito Zoom nas imagens com lupa 110111Seta Salvar CSS- Salva todo o CSS em arquivo TXT em seu computador. Em outras palavras, permite criar um backup de seu CSS personalizado.
efeito - [TUTORIAL] Efeito Zoom nas imagens com lupa 110210Seta 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".
efeito - [TUTORIAL] Efeito Zoom nas imagens com lupa 110310Seta 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.
efeito - [TUTORIAL] Efeito Zoom nas imagens com lupa 110410Seta 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.

efeito - [TUTORIAL] Efeito Zoom nas imagens com lupa Php31210 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;
    }

efeito - [TUTORIAL] Efeito Zoom nas imagens com lupa Php21110PHPBB2
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;
    }

efeito - [TUTORIAL] Efeito Zoom nas imagens com lupa Pun1210PUNBB

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

efeito - [TUTORIAL] Efeito Zoom nas imagens com lupa Inv1010INVISION

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;
    efeito - [TUTORIAL] Efeito Zoom nas imagens com lupa VLRDsQI


Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos