Issues with Lazy Loading and Hover Over Images

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=“”][x_image type=“circle” float=“none” src=“”]

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( 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(

along with:

.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

Any guidance would be greatly appreciated.


Hello Niel,

Thanks for writing in!

Your images are displaying correctly.

I can see that you have added customization to the images. We highly recommend that instead of using Raw Content and custom HTML to add the images, please utilize the row or grid and the image element so that you will have more control over the element. you won’t even need to have the custom CSS code because you can easily do it within the image element settings.

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Best Regards.

Okay … a few questions then.

  1. Does the grid allow for 8 columns? If so, how would that setup look like?

  2. Does the image element have a rollover option to swap images on mousein and mouseout?

  3. Does the image element allow to target a class such as foobox for lightmodal popups?


Hello @wnhorne246,

Thanks for updating in!

1.) The grid allows as many cells as long as it fits in the row.

2.) The image element does not have a rollover option. Based on your design, you do not need a rollover image. You only need to apply inset box-shadow on hover and a border.

3.) Yes, you can add a custom class to an image element to be able to trigger modal popups.

Best Regards.

Thanks for the reply and suggestions. One last thing about this. In classic image there were options to choose image style, like circle and thumbnail. I used the thumbnail option a lot with its already styled border. Is that not an option in the updated image element?


2.) The image element does not have a rollover option. Based on your design, you do not need a rollover image. You only need to apply inset box-shadow on hover and a border.

How do I do this? I’ve recreated one button without any embed and emboss effects to test this out and don’t see these options.

Hello Neil,

I have created a test grid with your image in it to showcase what you can do with the grid and the image element. I used a red color and inset box shadow so that you can see it. You can check out the structure of the elements on this page:

Best Regards.

While this is all well and fine, it’s not exactly what I’m going for. This looks as if the box shadow is outset, not inset. I want the shadowing to cover the inner few pixels of the image, giving it a 3D effect, and then on hover, reduce the thickness of the pixels, of soften them to give the button a depressed look. If possible, it’d be great if you described the process you used to create these effects, Kinda lost here.

Also, you didn’t answer my other question.

As always, thanks for your time.


Hi Neil

The effect coming from the following custom code added into the Element CSS of the specific images. Please remember that inset box-shadow does not work with the images.

    border: solid 2px rgb(193,30,30);
    box-shadow: none;

On your other question. The image element have all those options in a better way, to customize as much as possible. Please find the screenshot below describing the options.

The Border with color and other options.
test-new-Content-Pro (94)

The Border Radius option to make the image circle or rounded corner.

The Box Shadow options.
test-new-Content-Pro (92)

Hope it helps.

1 Like

Thanks Tristup. I’ll try and wrap my head around duplicating the Classic Image’s Thumbnail option. While the image element does have a lot of options that’ll be of great benefit, it would still be nice to have the classic options incorporated into the new image element as a preset/jumping off point.

As to my original issue with the lazy loading and using some CSS magic with the image element.

Why, yes it does…

$el.x-image:hover {
content: url(;
z-index: 999;
width: 100%;

This code applied to the Element CSS of the image, swaps out the image on hover, is responsive, reduces the DOM size of the page drastically (compared to what I was doing), and most importantly, is NOT effected by lazy loading.

According to Tristup, this is not possible.

Anyway… Problem solved–I think :slight_smile: . You can see the results here. Please let me know if you see any issues with this approach.

Take care guys.


Hi Neil,

Glad that we are able to help you.


1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.