I was also wondering if this was possible. I don't want to stack text, but I want a mixture of image and text.

If I use the "element grid", I can't change the size of the image, can I?

@abc Page Overlays, you can activate them in 'lay options' > 'lay options' and then there will be settings at the bottom right in the page editor next to the grid.

Dear Richard, thank you for this post. I am trying to solve a multilingual page with this approach. Do you mind sharing the CSS code of how to hide menus leaving 1 visible?

Thanks in advance

@arminunruh thank you so much, this works perfectly!

u're using a custom svg image as the close icon
i cant put a hover color on this with custom css i think

i cant reproduce this do you have a link?
did you try the steps in the blue box to the right?

do you have a link to where the bug is reproduced?
i cant reproduce the issue

will be fixed with the next update!

It would definitely be great if you could save a row and load it back in.

the settings "project thumbnails" in customizer can change the mouseover appearance of a project thumbnail.

you can add a project thumbnail to an elementgrid.

whether you add a project thumbnail to an element grid or directly to the gridder;
both will have the same styling based on the customizer settings

but please note that if you just add an image via +image and link it, thats not the same as a project thumbnail element

Also I noticed out something it may be interesting and would be nice to have as well. Logically, if you set the Image Hover plugin -> Image Position for show on hover - Follow mouse on XY - with the Pre-activate this Hover Image activated - it won't follow the mouse. For example: https://georginanorris.com/homepage-copy/

image.png

yes!

right click the row in the gridder.
click "set row html class and id"
and as class enter:

bgbottom

then use this css:

@media (orientation: landscape) { .bgbottom .background-image.background-image-count-1 img{ object-fit: fill!important; width: 100%!important; height: auto!important; left: 0!important; top: auto !important; bottom: 0!important; } }

Enter this css in "lay options" -> "custom css & html" -> "custom css"

not in "custom css for desktop"
(needs to be in custom css, because we use a media query here, and for desktop already has a media query applied to it)

we're using a media query for landscape browser, because if were on a portrait sized browser we dont want to use this css
because then a white gap could appear

ah yes very good :)

Oh nice, thank you Armin.

Now it works! Thanks again Armin!

hey i just noticed there are breadcrumbs in the code

use this css:

.woocommerce-breadcrumb{ display: block!important; }

Enter this css in "lay options" -> "custom css & html" -> "custom css for desktop"

Screenshot 2025-02-16 at 10.11.19.png

oh i see! hmm unfortunately its not possible

im not sure if i understand what you mean

imagehover images work for links in texts elements only

make sure to remove your custom css you added before