I'm working on a project where I have multiple cards, and I've implemented a hover effect using jQuery to make the images inside the cards bigger. However, I'm facing an issue where hovering over one card triggers the effect on all the other cards as well. Is there a solution to this problem without having to create separate classes for each card in CSS?
$(document).ready(function() {
$('.cardjs-1,.cardjs-2').mouseover(function() {
$('.cardimage').addClass('card-js-hover');
$('.cards').mouseout(function() {
$('.cardimage').removeClass('card-js-hover');
});
});
});.cards-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
align-content: center;
justify-content: center;
padding: 50px;
}
.cards {
display: grid;
grid-template-rows: 3fr 1fr 1fr 1fr;
align-items: center;
text-align: center;
width: 200px;
height: auto;
background: #f2f2f2;
border-radius: 15px;
box-shadow: 10px 10px 80px 10px #a29d9d;
overflow: hidden;
}
.cardimage {
display: block;
margin-left: auto;
margin-right: auto;
width: 100px;
height: 100px;
border-radius: 100px;
transition: border-radius .1s, width .1s, height .1s;
}
.card-js-hover {
border-radius: 0;
width: 100%;
height: 100%;
}
.btn-book {
padding: 15px;
background: #F25F5C;
color: #fff;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cards-container">
<div class="cards cardjs-1">
<img src="https://images.pexels.com/photos/338515/pexels-photo-338515.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="paris-image" class="cardimage">
<h4>PARIS</h4>
<p>$500/4 days</p>
<a class="btn-book" href="#">Book Now</a>
</div>
<div class="cards cardjs-2">
<img src="https://images.pexels.com/photos/2570063/pexels-photo-2570063.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="cardimage">
<h4>BERLIN</h4>
<p>$200/3 days</p>
<a class="btn-book" href="#">Book Now</a>
</div>
</div>