MediaWiki:Common.css: mudanças entre as edições
De Sweet
Criou página com '→* o código CSS colocado aqui será aplicado a todos os temas: →Zoom de imagem ao passar o mouse: .btn-zoom img { transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease; transform-origin: center center; } .btn-zoom:hover img { transform: scale(1.08); box-shadow: 0 6px 18px rgba(0,0,0,.25); filter: saturate(1.05); }' |
Sem resumo de edição |
||
| (3 revisões intermediárias pelo mesmo usuário não estão sendo mostradas) | |||
| Linha 1: | Linha 1: | ||
/** | /** ========================================================= | ||
/* Zoom de | * Estilos globais (aplicam em todos os temas) | ||
* =======================================================*/ | |||
/* Zoom suave para qualquer imagem dentro de .btn-zoom */ | |||
.btn-zoom img { | .btn-zoom img { | ||
transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease; | transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease; | ||
transform-origin: center center; | transform-origin: center center; | ||
} | |||
.btn-zoom:hover img { | |||
transform: scale(1.08); | |||
box-shadow: 0 6px 18px rgba(0,0,0,.25); | |||
filter: saturate(1.05); | |||
} | } | ||
.btn-zoom:hover img { | /* ===== Botão sobreposto (imagem sobre imagem) ===== */ | ||
/* Container opcional (caso queira usar em vez de inline style) */ | |||
.overlay-wrapper { | |||
position: relative; | |||
display: inline-block; | |||
} | |||
/* Reset visual da imagem-botão + mesmo zoom do .btn-zoom */ | |||
.overlay-btn img { | |||
display: block; | |||
border: none !important; | |||
background: transparent !important; | |||
box-shadow: none !important; | |||
transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease; | |||
transform-origin: center center; | |||
cursor: pointer; | |||
} | |||
.overlay-btn:hover img { | |||
transform: scale(1.08); | transform: scale(1.08); | ||
box-shadow: 0 6px 18px rgba(0,0,0,.25); | box-shadow: 0 6px 18px rgba(0,0,0,.25); | ||
filter: saturate(1.05); | filter: saturate(1.05); | ||
} | |||
/* Efeito de “pressionado” ao clicar */ | |||
.overlay-btn:active img { | |||
transform: scale(1.03); | |||
box-shadow: 0 2px 8px rgba(0,0,0,.25); | |||
} | |||
/* Wrapper da sobreposição */ | |||
.overlay-wrapper { | |||
position: relative; | |||
display: inline-block; | |||
} | |||
/* Posição do botão sobre a arte */ | |||
.overlay-wrapper .overlay-btn { | |||
position: absolute; | |||
left: 50%; | |||
bottom: 22px; /* ajuste fino à vontade */ | |||
transform: translateX(-50%); | |||
} | |||
/* Remove qualquer fundo/borda/padding que o MediaWiki aplique */ | |||
.overlay-wrapper .overlay-btn a.image, | |||
.overlay-wrapper .overlay-btn img { | |||
background: transparent !important; | |||
border: 0 !important; | |||
padding: 0 !important; | |||
box-shadow: none !important; | |||
} | } | ||
Edição atual tal como às 14h04min de 7 de setembro de 2025
/** =========================================================
* Estilos globais (aplicam em todos os temas)
* =======================================================*/
/* Zoom suave para qualquer imagem dentro de .btn-zoom */
.btn-zoom img {
transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
transform-origin: center center;
}
.btn-zoom:hover img {
transform: scale(1.08);
box-shadow: 0 6px 18px rgba(0,0,0,.25);
filter: saturate(1.05);
}
/* ===== Botão sobreposto (imagem sobre imagem) ===== */
/* Container opcional (caso queira usar em vez de inline style) */
.overlay-wrapper {
position: relative;
display: inline-block;
}
/* Reset visual da imagem-botão + mesmo zoom do .btn-zoom */
.overlay-btn img {
display: block;
border: none !important;
background: transparent !important;
box-shadow: none !important;
transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
transform-origin: center center;
cursor: pointer;
}
.overlay-btn:hover img {
transform: scale(1.08);
box-shadow: 0 6px 18px rgba(0,0,0,.25);
filter: saturate(1.05);
}
/* Efeito de “pressionado” ao clicar */
.overlay-btn:active img {
transform: scale(1.03);
box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
/* Wrapper da sobreposição */
.overlay-wrapper {
position: relative;
display: inline-block;
}
/* Posição do botão sobre a arte */
.overlay-wrapper .overlay-btn {
position: absolute;
left: 50%;
bottom: 22px; /* ajuste fino à vontade */
transform: translateX(-50%);
}
/* Remove qualquer fundo/borda/padding que o MediaWiki aplique */
.overlay-wrapper .overlay-btn a.image,
.overlay-wrapper .overlay-btn img {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
box-shadow: none !important;
}
