I utilized grid layout to organize the elements on a page. However, when I attempted to add a hover effect to an image within a div, it caused some glitches so I decided against it.
Subsequently, I tried adding a hover effect to the entire div instead. Unfortunately, this resulted in the image of other divs getting transformed when hovering over one specific div. Can you please explain what is causing this issue and suggest a possible solution?
HTML
<div class="content1" id="webpages">
<div class="cards" id="card1">
<img src="https://dummyimage.com/300x168/000/ffffff&text=dummy+box1" alt="webpage unavailable">
</div>
<div class="cards" id="card2">
<img src="https://dummyimage.com/300x168/000/ffffff&text=dummy+box2" alt="webpage unavailable">
</div>
<div class="cards" id="card3">
<img src="https://dummyimage.com/300x168/000/ffffff&text=dummy+box3" alt="webpage unavailable">
</div>
<div class="cards" id="card4">
<img src="https://dummyimage.com/300x168/000/ffffff&text=dummy+box4" alt="webpage unavailable">
</div>
</div>
CSS
/* Cards Layout Starts Here */
.cards {
border: 1px solid #000;
position: relative;
height: 300px;
width: 300px;
overflow: hidden;
}
.cards img {
position: absolute;
top: 0;
left: -50px;
height: auto;
width: 400px;
transition: all 1s ease;
}
.cards:hover+.cards img {
position: absolute;
top: 22%;
left: 0;
height: auto;
width: 298px;
}
.cards #plus {
width: 50px;
height: auto;
display: block;
}
/* Cards Layout Ends Here */
/* Grid Layout Starts Here */
.content1 {
display: grid;
grid-template-columns: auto auto;
gap: 20px;
}
/* Grid Layout Ends Here */