Could you please ensure that the animation activates upon hovering over the "a" element?

Utilizing bootstrap, I have created the following code. I am looking to add functionality that triggers an animation upon mouseover of an img or a element, and stops the animation upon mouseleave.

.progress-bar {
  animation: pr 2s infinite;
}

@keyframes pr {
  0% {
    width: 0;
    color: red;
  }
  10% {
    background-color: blue;
  }
  20% {
    background-color: black;
  }
  30% {
    background-color: yellow;
  }
  40% {
    background-color: tomato;
  }
  50% {
    width: 100%;
    background-color: violet;
  }
  60% {
    background-color: rgb(184, 145, 145);
  }
  70% {
    background-color: white;
  }
  80% {
    background-color: rgb(0, 255, 234);
  }
  100% {
    width: 0;
    background-color: red;
  }
}
<div style="margin-top: 50px" data-aos="fade-in" class="choosebybrand">
  <div class="samsung">
    <a href="samsung.html" class="buki">
      <div class="frontimage">
        <img src="images/samsung.png" height="232px" width="115px" alt="">
      </div>
      <h3>Samsung</h3>
    </a>

  </div>
  <div class="progress">
    <div class="progress-bar"></div>
  </div>

javascripthtmlcssbootstrap-4bootstrap-5

Answer №1

To display your progress bar, you need to specify a height.

Here is an example:

/* Ensure the progress bar is as wide as the picture box */


/* Uncomment the selector & rule below if needed */


/* .choosebybrand {
  display:inline-block; 
 }*/

.choosebybrand:hover ~ .progress .progress-bar {
  animation: pr 2s infinite;
  height: 1em;
}

@keyframes pr {
  0% {
    width: 0;
    color: red;
  }
  10% {
    background-color: blue;
  }
  20% {
    background-color: black;
  }
  30% {
    background-color: yellow;
  }
  40% {
    background-color: tomato;
  }
  50% {
    width: 100%;
    background-color: violet;
  }
  60% {
    background-color: rgb(184, 145, 145);
  }
  70% {
    background-color: white;
  }
  80% {
    background-color: rgb(0, 255, 234);
  }
  100% {
    width: 0;
    background-color: red;
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<div style="margin-top: 50px" data-aos="fade-in" class="choosebybrand">
  <div class="samsung">
    <a href="samsung.html" class="buki">
      <div class="frontimage">
        <img src="https://dummyimage.com/150x100&text=samsung" alt="">
      </div>
      <h3>Samsung</h3>
    </a>

  </div>
</div>
<div class="progress">
  <div class="progress-bar"></div>
</div>

Answer №2

For achieving this effect, consider utilizing the ~ selector.

a:hover ~ .progress-bar {
  animation: pr 2s infinite;
}

Answer №3

Check out the LATEST version of the code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    @keyframes pr {
        0% {
            width: 0;
            color: red;
        }
        10% {
            background-color: blue;
        }
        20% {
            background-color: black;
        }
        30% {
            background-color: yellow;
        }
        40% {
            background-color: tomato;
        }
        50% {
            width: 100%;
            background-color: violet;
        }
        60% {
            background-color: rgb(184, 145, 145);
        }
        70% {
            background-color: white;
        }
        80% {
            background-color: rgb(0, 255, 234);
        }
        100% {
            width: 0;
            background-color: red;
        }
    }
    .hover-box .progress .progress-bar {
        height: 20px;
        width: 100%;
    }
    .hover-box .content:hover + .progress .progress-bar {
        background: red;
        animation: pr 2s infinite;
    }

</style>
</head>
<body>

    
    <div class="hover-box">
        <div class="content">
            <a href="#!">Hover over me</a>
        </div>
        <div class="progress">
            <div class="progress-bar"></div>
        </div>
    </div>
</body>
</html>

Answer №4

To achieve the desired effect mentioned in the question, CSS alone is not sufficient as the anchor and img elements are not directly related to the progress bar element. In CSS, it is not possible to navigate 'up' the DOM tree and then back 'down' again.

One approach that can be taken is to detect hover on a parent element of the anchor and img elements, which is also a sibling of the progress element, and trigger the animation on the progress bar based on that.

.samsung {
  display: inline-block;
}

.samsung:hover~.progress .progress-bar {
  animation: pr 2s infinite;
}

.progress {
  width: 100vw;
}

.progress-bar {
  height: 2px;
  width: 100vw;
  background-color: magenta; /* added so something is seen when no hover */
}

@keyframes pr {
  0% {
    width: 0;
    color: red;
  }
  10% {
    background-color: blue;
  }
  20% {
    background-color: black;
  }
  30% {
    background-color: yellow;
  }
  40% {
    background-color: tomato;
  }
  50% {
    width: 100%;
    background-color: violet;
  }
  60% {
    background-color: rgb(184, 145, 145);
  }
  70% {
    background-color: white;
  }
  80% {
    background-color: rgb(0, 255, 234);
  }
  100% {
    width: 0;
    background-color: red;
  }
}
<div style="margin-top: 50px" data-aos="fade-in" class="choosebybrand">
  <div class="samsung">
    <a href="samsung.html" class="buki">
      <div class="frontimage">
        <img src="images/samsung.png" height="232px" width="115px" alt="">
      </div>
      <h3>Samsung</h3>
    </a>

  </div>
  <div class="progress">
    <div class="progress-bar"></div>
  </div>

Note: the snippet had to add height dimension so the progress bar could be seen.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm curious about how to properly escape single quotes when passing a variable in a Java argument call using Karate DSL. Can you help

As part of our API project at work, I am looking to incorporate database calls into our end-to-end process. One challenge I am facing is how to handle single quotes within a variable that is passed as an argument in an assert method. I have attempted the f ...

javascriptjavasqlkarate

When viewing a webpage on a small browser, the content will automatically expand to fill the

Attempting to utilize responsive CSS media queries to hide the sidebar unless the screen is large or a tablet big enough in landscape mode. It appears to be functioning properly while resizing the browser, but at a certain size, it occupies the entire scre ...

cssresponsive-design

Unexpected Undefined Return in Request Parameters

Hey everyone, I'm currently working on setting up a mock API server using a JSON file with some dummy data. The first route I created is functioning perfectly: const express = require("express"); const router = express.Router(); const data = requir ...

javascriptnode.jsjsonexpressmockserver

Vue.js Issue: Image not properly redirected to backend server

Having an issue with my Vue app connecting to the backend using express. When I attempt to include an image in the request, it doesn't reach the backend properly. Strangely though, if I bypass express and connect directly from the Vue app, everything ...

javascriptvue.jsexpressfileexpress-fileupload

Having trouble with getting the background image URL to work in Django CSS?

Hey there, I'm having an issue with my header-task class. The background-image doesn't seem to be showing up, even though when I click the URL in Visual Studio Code, the image displays. Can anyone help me figure out what's going wrong with m ...

cssdjango

Is it possible to have separate ports for front-end and back-end in NODEJS?

As I develop my NodeJS website, incorporating both front-end and back-end components, it is recommended to organize the files in such a way that the front-end specifically requests data from the back-end via an API. I am curious whether it is considered a ...

javascriptnode.js

CSRF validation did not pass. The request has been cancelled. The failure occurred due to either a missing or incorrect CSRF token

Upon hitting the submit button in the login form, I encountered the following error message: Forbidden (403) CSRF verification failed. Request aborted. CSRF token missing or incorrect. settings.py MIDDLEWARE = [ 'django.middleware.security.Secur ...

javascripthtmlcsspython-3.xdjango-rest-framework

Leverage flex columns in Bootstrap 4.0 for advanced layout options

Hey, I need some assistance to set up columns in my code. Here's the current code snippet: <div class="container-fluid h-100"> <div class="row h-100"> <div class="flex-column h-100">side menu</div> <div ...

csstwitter-bootstrapflexboxbootstrap-4twitter-bootstrap-4

Changing the MIME type from "application/octet-stream" to "video/mp4" in HTML5: A Step-by-Step Guide

<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> </head> <body> <video id="video" controls src="${maps.url }" height="598" width="782"> ...

htmljsp

The variable $ has not been defined in Jquery framework

<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="deployJava.js"></script> <script type="text/javascr ...

javascriptjqueryhtmljquery-uiweb

Need for input

I am working on organizing my routes in a separate file from app.js. The login route requires access to a Firebase instance. routes/auth.js var express = require('express'); var router = express.Router(); module.exports = function(firebase) { ...

javascriptnode.jsexpress

How to utilize local functions within a ko.computed expression

Why isn't this line of code working? I'm using durandal/knockout and my structure is like this define(function () { var vm = function() { compute: ko.computed(function() { return _compute(1); // encountering errors }); ...

javascriptjqueryknockout.jsrequirejsdurandal

What is preventing my HTML/CSS code from generating a button on the webpage?

There seems to be an issue with the image on my webpage - it's displaying a broken page icon instead of the actual image, even though it was showing fine before. The image name and location have not been changed. I'm also having trouble creating ...

htmlcssimage

Tips for changing the color and incorporating text into an image

Hey there! I'm interested in creating a website where users can select colors like blue, white, and black without the page reloading. Once a color is selected, users should have the option to add text on top of the color image, as well as the option t ...

cssajaxjquery-ui

React is having trouble rendering the current weather information

My code is not functioning properly and I am encountering a TypeError that says "cannot read the property of undefined ('temp')". import React, { useEffect, useState } from "react"; import "./css/style.css"; import { BiStreetV ...

javascriptreactjsapi

display a div positioned relatively next to another div

I'm having trouble displaying a textbox next to another div on my webpage. Instead of appearing next to the div, it is showing up below it. The textbox needs to have an absolute position. You can see the issue in action by checking out this demo. Than ...

javascriptjqueryhtmlcss

Need help accessing data from an API using Axios.post and passing an ID?

Can someone help me with passing the ID of each item using Axios.Post in order to display its data on a single page? The image below in my Postman shows how I need to send the ID along with the request. Additionally, I have the first two URL requests for t ...

javascriptvue.jsvue-routervue-cli

The 'id' property cannot be accessed because the data has not been retrieved successfully

After loading my App, the data from Firebase is fetched in componentDidMount. I am currently passing postComments={comments} as a prop. However, before this happens, my app crashes with Cannot read property 'id' of undefined on line const c ...

javascriptreactjs

In Nodejs, the function 'require' fails to load a module when using specific filenames

Hello everyone, I am a long-time user but this is my first time asking a question. So, I have a file named file.js where I am trying to require another file called user.service.js at the beginning of the file: var userService = require('./user.servi ...

javascriptnode.js

Unlinking checkbox click event from row in Angular Material table

I am seeking to remove the ability for row selection in my table rows so that clicking anywhere within the row does not check the checkbox. I want the checkbox to only be checked when the box itself is clicked, allowing me to later add expandable rows when ...

htmlangularangular-material