Widget:VisnoTeste
Ir para navegação
Ir para pesquisar
<!DOCTYPE html> <html lang="pt-BR"> <head>
<meta charset="UTF-8">
<title>Teste GIF Hover</title>
<style>
.personagem {
width: 200px;
height: 100px;
border-radius: 10px;
background-color: #414c5c;
background-image: url('https://postimg.cc/CZ0K6WjF');
background-size: 150%;
background-position: center -30px;
transition: transform 0.3s;
display: flex;
align-items: flex-end;
justify-content: flex-end;
padding: 5px;
font-weight: bold;
font-family: sans-serif;
color: white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
position: relative;
cursor: pointer;
border: 2px solid #58aaff;
overflow: hidden;
}
.personagem span {
z-index: 2;
}
.gif-overlay {
position: absolute;
inset: 0;
background-repeat: no-repeat;
background-size: 150%;
background-position: center -30px;
opacity: 0;
transition: opacity 0.4s ease;
z-index: 1;
pointer-events: none;
}
.personagem:hover {
transform: scale(1.05);
}
.personagem:hover .gif-overlay {
opacity: 1;
}
.container {
display: flex;
gap: 10px; /* espaçamento entre os botões */
flex-wrap: wrap; /* para quebrar linha se não couber */
justify-content: center; /* opcional: centraliza */
}
.personagem.luffy .gif-overlay {
background-position: center 0px; /* ajuste aqui para mover para baixo (ex: 10px, 20px...) */
}
</style>
</head> <body>
Aokiji
Monkey D. Luffy (TS)
<script> const cards = document.querySelectorAll('.personagem');
cards.forEach(card => {
const staticImg = card.getAttribute('data-static');
const gifImg = card.getAttribute('data-gif');
const overlay = card.querySelector('.gif-overlay');
// Define o fundo estático
card.style.backgroundImage = `url('${staticImg}')`;
card.addEventListener('mouseenter', () => {
const uniqueGifUrl = `${gifImg}?t=${new Date().getTime()}`;
overlay.style.backgroundImage = `url('${uniqueGifUrl}')`;
});
card.addEventListener('mouseleave', () => {
overlay.style.backgroundImage = ;
});
});
</script>
</body> </html>