I have an issue where my hover over images and the original image are both showing on top of one another when lazy loaded using the following code:
[x_image type=“circle” float=“none” src=“https://emilycolin.com/wp-content/uploads/2016/06/barnes__noble.png”][x_image type=“circle” float=“none” src=“http://emilycolin.com/wp-content/uploads/2016/06/barnes__noble_hover.png”]
I’ve excluded “x-img-circle” from lazy loading as a result. But now they are killing my lighthouse score, so I need to find a way to swap the images with some kind of CSS magic, but I can’t seem to find a way that was as responsive as whet I was using.
Here’s an example of what I have so far for each rollover:
/* Bookshop */
.bookshop_rollover {
display: block;
width: 100px;
height: 100px;
background: url(https://emilycolin.com/wp-content/uploads/2020/07/book_shop.png) no-repeat;
border-top-left-radius: 50% 50%;
border-top-right-radius: 50% 50%;
border-bottom-right-radius: 50% 50%;
border-bottom-left-radius: 50% 50%;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
.bookshop_rollover:hover {
background: url(https://emilycolin.com/wp-content/uploads/2020/07/book_shop_hover.png)
}
along with:
/* GRID OF EIGHT */
.span_8_of_8 {
width: 100%;
}
.span_7_of_8 {
width: 87.37%;
}
.span_6_of_8 {
width: 74.75%;
}
.span_5_of_8 {
width: 62.12%;
}
.span_4_of_8 {
width: 49.5%;
}
.span_3_of_8 {
width: 36.87%;
}
.span_2_of_8 {
width: 24.25%;
}
.span_1_of_8 {
width: 11.62%;
}
This works great for all eight images except for having to assign the width and height a pixel value. I tried a percentage value and failed miserably, as I’m sure you know.
Is there a responsive way to do this so that as the browser size decreases, so does the two images that are being swapped? If not, I’ll need to resize the images for each breakpoint to work with an @media declaration in the CSS.
You can see what I’m tinkering around with at https://emilycolin.com/test/
Any guidance would be greatly appreciated.
Neil
. You can see the results 
