I'm trying to make some images rotate in their place when the mouse is over them but I've tried various methods and none seem to work. :( I don't know if the methods I've tried don't work because the mouseover event doesn't bubble up or if I should change it to mouseenter. Help please! This is my code:
document.querySelector(".images").addEventListener("mouseover", function(event) {
var activeAnimation = document.querySelector(".images");
activeAnimation.classList.add("principalanimation");
setTimeout(function() {
activeAnimation.classList.remove("principalanimation");
}, 1000);
});.principalanimation {
animation-name: rotate1;
animation-timing-function: linear;
animation-duration: 1s;
}
@keyframes rotate1 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);<div class="row">
<div class="image_box col-lg-3 col-md-4 col-sm-6">
<a href="https://classroom.google.com/u/1/w/NTI1OTMwNjM3NDc1/t/all?hl=es" target="blank">
<img src="images/hp.jpeg" class="img-fluid images" alt="">
</a>
<h3 class="feature-titles">Harry Potter</h3>
<hr>
</div>
<div class="image_box col-lg-3 col-md-4 col-sm-6">
<a href="https://classroom.google.com/u/1/w/NTI1OTMwNjM3NDc1/t/all?hl=es" target="blank">
<img src="images/1d.jpeg" class="img-fluid images" alt="">
</a>
<h3 class="feature-titles">One Direction</h3>
<hr>
</div>
<div class="image_box col-lg-3 col-md-4 col-sm-6">
<a href="https://www1.cuevana3.vc/13780/bo-burnham-inside" target="blank">
<img src="images/bo.jpeg" class="img-fluid images" alt="">
</a>
<h3 class="feature-titles">Bo Burnham</h3>
<hr>
</div>
<div class="image_box col-lg-3 col-md-4 col-sm-6">
<a href="https://classroom.google.com/u/1/w/NTI1OTMwNjM3NDc1/t/all?hl=es" target="blank">
<img src="images/hungie.jpeg" class="img-fluid images" alt="">
</a>
<h3 class="feature-titles">The Hunger Games</h3>
<hr>
</div>
<div class="image_box col-lg-3 col-md-4 col-sm-6">
<a href="https://www.pelisplus2.io/pelicula/entrevista-con-el-vampiro/" target="blank">
<img src="images/intervampire.jpeg" class="img-fluid images" alt="">
</a>
<h3 class="feature-titles">Interview with the Vampire</h3>
<hr>
</div>