[TUTORIAL] Efeito Zoom nas imagens com lupa

Aplicação do 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órum

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

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;