Mudanças entre as edições de "Widget:Teste"
Ir para navegação
Ir para pesquisar
| Linha 2: | Linha 2: | ||
<!-- Card 1 --> | <!-- Card 1 --> | ||
<div class="home-button-item"> | <div class="home-button-item"> | ||
<a href="/ | <a href="/index.php/Personagens" title="Personagens"> | ||
<div class="home-button-image"> | <div class="home-button-image"> | ||
<img src=" | <img src="https://wiki.gla.com.br/images/a/a8/Personagens_card.png" alt="Personagens"> | ||
</div> | </div> | ||
<div class="home-button-title">PERSONAGENS</div> | <div class="home-button-title">PERSONAGENS</div> | ||
Edição das 16h05min de 28 de março de 2025
<style> .home-button-container {
display: grid; grid-template-columns: repeat(4, 1fr); /* 4 colunas - ajuste conforme necessário */ gap: 10px; padding: 10px; box-sizing: border-box;
}
.home-button-item {
position: relative; overflow: hidden; border: 1px solid #ddd; border-radius: 8px; background: #fff; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; box-sizing: border-box;
}
.home-button-item:hover {
transform: translateY(-5px); border-color: #007bff; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
.home-button-item a {
display: block; text-decoration: none; color: inherit;
}
.home-button-image {
width: 100%; /* Alterado para 16:9, reduzindo a altura */ aspect-ratio: 16/9; overflow: hidden;
}
.home-button-image img {
width: 100%; height: 100%; object-fit: cover; display: block; transition: filter 0.3s ease;
}
.home-button-item:hover img {
filter: brightness(1.1);
}
.home-button-title {
font-weight: bold; font-size: 1.1em; background: #fff; color: #000; margin: 0; padding: 10px 5px; position: relative; text-transform: uppercase; border-top: 1px solid #ddd; text-align: center; transition: background-color 0.3s ease;
}
.home-button-item:hover .home-button-title {
background-color: #f9f9f9;
} </style>