I'm looking to add some interactive animation to an image inside a div when my mouse hovers over it.
To better explain the issue I'm facing, I created a quick representation of what I want to achieve in the code below.
My goal is to have the text bounce slightly every time the mouse is moved over the image or text within the container.
The challenge I encountered is that elements do not seem to bounce when they are part of a flexbox layout. However, I haven't been able to find any conclusive evidence in the documentation to support this theory.
Could someone provide guidance on how to implement the bouncing effect while utilizing flexbox?
$(document).ready(function() {
$('.text').hover(function() {
$(this).toggle("bounce",{times: 3}, "slow");
});
});.one{
margin:0;
}
.container{
height:500px;
width:500px;
background-color:gray;
display:flex;
flex-wrap:wrap;
align-items:horizontally;
justify-content:space-around;
align-items:center;
}
.dog{
background-color:red;
height:100px;
width:100px;
}
.cat{
background-color:blue;
height:100px;
width:100px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="one">
<div class="container">
<div class="dog">
<div class="text">Hello Dog</div>
</div>
<div class="cat">
Hello Cat
</div>
</div>
</body>