Eis cópia do código CSS personalizado adicionado ao Mastodon da comunidade Ayom para que as imagens de emojis personalizados sejam ampliadas ao serem apontadas pelo mouse ou pressionadas em telas sensíveis ao toque em, no caso, três vezes, com um efeito de transição durando 0,2 segundos.
.custom-emoji,
.emojione {
transition: transform 0.2s ease;
}
.custom-emoji:hover,
.emojione:hover {
transform: scale(3.0);
}
Fica como exemplo que pode ser aproveitado pela administração de outras instâncias desse sistema. Isso é definido na página de configuração da Aparência, /admin/settings/appearance.
O princípio também pode ser adaptado para outras situações de outros sistemas que marquem imagens com determinada classe de estilo. Fiz algo similar na minha instância do SNAC.
Descrição da imagem
Recorte de captura de tela demonstrativa da interface Web do Mastodon da Ayom com tema escuro em que figura uma publicação com destaque de um emoji personalizado “blobAlt” ampliado pelo cursor do mouse que paira sobre a imagem.

