Start a Gif on Hover

Question

I cannot figure out how to make my button start a gif while hovered and if its not hovered - it goes back to the previous background, and again on hover its start a gif from the starting position. What i get is a gif constantly playing and on hover I get a random position (because the gif is playing constantly)

CSS

.gradient-button {
    /* Text Styles */
    color: white;
    font-size: 20px;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    position: relative;
    overflow: hidden;

    /* Dark Purple Background by default */
    background: #282828;

    /* Shadow Effect */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    /* Transition for Hover Effect */
    transition: background 1s ease;
    cursor: pointer;
}

.gradient-button:hover {
    /* Hover Effect: GIF Background */
    background: url('./gifs/nastronke.gif') no-repeat center center;
    background-size: fill;

    /* Hover Effect: Lift Button */
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.gradient-button:hover::before {
    opacity: 0; /* Remove the overlay on hover */
}

HTML/PHP

<?php
                session_start();
                if (isset($_SESSION["user_id"])) {
                    echo '<a href="../logout.php" class="gradient-button">LOGOUT</a>';
                } else {
                    echo '<a href="../login.php" class="gradient-button">LOGIN</a>';
                }
                ?>

Any Ideas how Can i fix it?

Start gif on hover (stop at the end), stop while not hovered, then start from the beggining on hover.

Answer 1

1. Prepare Images: You need two images: a static image (e.g., a single frame of the GIF to show when not hovered) and the GIF itself.
2. JavaScript to Swap Images: Use JavaScript to change the src attribute of an img tag or the background-image of a button when it's hovered over and when the hover ends.

Here's how you can adjust your current setup to include JavaScript functionality. Since your button seems to be styled as a link (<a> tag), you'll need to slightly adjust your approach to use a div or similar element that can have its background changed dynamically. However, for simplicity, I'll demonstrate how to swap images for an tag, and you can adapt this to your needs.

HTML

<a href="#" class="gradient-button" id="animatedButton">LOGIN</a>

CSS Your CSS stays mostly the same, but you'll remove the background property change from .gradient-button:hover since we'll handle the hover effect with JavaScript.

JS

<script> document.addEventListener('DOMContentLoaded', function() {
var button = document.getElementById('animatedButton');

button.addEventListener('mouseenter', function() {
    // Change to animated GIF on hover
    this.style.backgroundImage = "url('./gifs/nastronke.gif')";
});

button.addEventListener('mouseleave', function() {
    // Change back to static image when not hovered
    this.style.backgroundImage = "url('./path/to/your/static/image.jpg')";
}); }); </script>

Remember to replace './path/to/your/static/image.jpg' with the actual path to your static image and adjust the paths as needed for your setup.