image hover add-on sizes

[tali]

Hello!

I want to set a different size for each time I use ImageHoverAddon.

So that in the first section, when hovering on text, the image has full width, and that on the second section, the image is just small..

Is this possible? :)

Thank you!

[Richard]

Dear @tali

This would be possible with Custom CSS, targeting the Imagehover region and the images that sit inside it:

https://laytheme.com/documentation/custom-css-styling.html

The lay-Imagehover-region is the parent container and the children images are called lay-image-responsive

The images order in the container should match the order the links appear on the page.
Because all the images sit in the same parent container and do not share different classes i would use the nth-child selector:

https://www.w3schools.com/cssref/sel_nth-child.asp

If you have 4 images in the first section and 5 in the second section then you know to target the last 5 and apply your 'small image' css.

The following code is saying

• within the imagehover region (.lay-imagehover-region)
• target all images from the 5th:

.lay-imagehover-region img.lay-image-responsive:nth-child(n+5) {
    // insert desired CSS here
}

---

hope this helps Tali & best wishes 🌝

Richard