Switch images on hover in CSS - css

Question

I have a grid created in CSS (of which only one of the items is shown in the code below)
CSS:
/* Grid 1 START*/
.grid-1 {
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: auto quto auto;
grid-gap: 4px;
}
/* Grid 1 END*/
Html:
<div class="item-1"><img class="alignleft wp-image-5497 size-full" src="image#1.png" alt="" width="300" height="200" /></div>
If on hovering the mouse over the image#1, I need to replace the image#1 (on hover only) to image#2 what would the code be to add into the lines above?
Any help would be appreciated. There are other "items" in the grid but I have shown only one line of code to keep it simple.

Answer 1

This isn't really a css-grid question, as most of the solutions would be completely independent of the layout.
But #Paulie_D is right - CSS can't change the html code. You'd either need the image already on the page, or use javascript to swap in the src of the new image. Or use background-image properties on the a element instead of using img elements.
But just adding the 'on-hover' img to the grid (immediately alongside the 'non-hover' img) and hiding / unhiding with css is probably the easiest, fastest solution:
<a href="/">
<img src="https://via.placeholder.com/300x200/b4c833/000000?text=Image+1" class="img1"/>
<img src="https://via.placeholder.com/300x200/000000/b4c833?text=Image+2" class="img2"/>
</a>
<style>
img {
display: block;
}
img + img {
display: none;
}
a:hover img {
display: none;
}
a:hover img + img {
display: block;
}
</style>
I'm using broad selectors here... You'd probably want to be more specific. Assuming the same code structure from the example you provided, this should be sufficient:
.grid-1 img {
display: block;
}
.grid-1 img + img {
display: none;
}
.grid-1 a:hover img {
display: none;
}
.grid-1 a:hover img + img {
display: block;
}
Also, you have a typo in your question that's also present in your example code:
grid-template-rows: auto quto auto; should be grid-template-rows: auto auto auto; (note the second auto)