I am working on creating a card that displays only the image when not hovered, but expands and reveals additional information in a div to the right of the image when hovered.
Unfortunately, when I hover over the image and then move towards the adjacent div, everything starts shaking, indicating an issue with the hover effect.
I've attempted to adjust the hover effect for both the image and the parent div containing them, but the problem persists.
Any suggestions on how to resolve this?
$(document).ready(function(){
document.querySelector(`.personCard-0 .imgCard img`).addEventListener("mouseover", () => hoverAnimation(0), false);
document.querySelector(`.personCard-0 .imgCard img`).addEventListener("mouseout", () => disableHoverAnimation(0), false);
})
const hoverAnimation = (index) => {
console.log('inside add animation');
$(`.personCard-${index}`).toggleClass('active');
$(`.personCard-${index} .personalInfoCard`).toggleClass('active');
}
const disableHoverAnimation = (index) => {
console.log('inside remove animation');
$(`.personCard-${index}`).toggleClass('active');
$(`.personCard-${index} .personalInfoCard`).toggleClass('active');
}*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
height: 50vh;
display: flex;
justify-content: center;
align-items: center;
}
.cards{
display: flex;
}
.personCard{
display: flex;
margin: 10px;
transition: all 0.4s ease-in-out;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.63);
border-radius: 10px;
overflow: hidden;
}
.personCard.active{
transform: scale(1.5);
}
.imgCard{
height: 200px;
width: 130px;
overflow: hidden;
transition: all 0.4s ease-in-out;
}
.imgCard img{
height: 200px;
width: 130px;
}
.personalInfoCard{
background-color: palevioletred;
display: flex;
height: 200px;
width: 0px;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: -1;
font-size: 14px;
transition: all 0.4s ease-in-out;
}
.personalInfoCard.active{
width: 200px;
display: flex;
z-index: 1;
height: 200px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
</script>
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="cards">
<div class="personCard-0 personCard" >
<div class="imgCard">
<img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
</div>
<div class="personalInfoCard">
<p>Name: Rand name</p>
<p>Age: Rand age</p>
<p>Job: Rand job</p>
<p>Study: Rand proffesion</p>
</div>
</div>
</div>
</body>
<script src="script.js"></script>
</html>