how to set an animation on image in bootstrap when mouse hover

Question

I want to set an animation on a image in my website when mouse over the image. but I do not want to use CSS. Is there any bootstrap class to animate an item directly?

Answer 1

It depends on how you want to accomplish it.

Is Bootstrap capable of adding animations to the elements? No

Boostrap is just a UI library with some premade components to help you build websites faster with consistency.

Are there any simple ways of accomplishing this? Yes

Method 1: Using plain CSS

.my-image:hover {
   /* Your custom animation here */
}

Method 2: Using JavaScript

yourElement.addEventListener("mouseover", (e) => {
     e.target.classList.add("your CSS class");
});

and to remove the animation

yourElement.addEventListener("mouseleave", (e) => {
     e.target.classList.remove("your CSS class");
});

example of a class that will be added

.rotate-js {
   /* Your custom animation here */
}

Good docs to consider reading:

MDN mouseover event: mouseover, mouseenter, events

W3SCHOOLS mouseover event: onmouseover Event

MDN mouseleave event: mouseleave event

Note: There are some libraries that will help you implement heavy/advanced animations like GSAP, and anime.js, give them a shot if you're interested.