Dear @paulomariz
Thank you for providing a link.
You are correct that it is possible through Custom CSS.
We can add our css through 'Lay Options - Custom CSS & HTML'
Screen Shot 2020-09-14 at 2.51.54 PM.png
For this we will need some basic knowledge of CSS :
https://www.khanacademy.org/computing/computer-programming/html-css
and also using the "inspect' developer tools in Google Chrome:
https://www.khanacademy.org/computing/computer-programming/html-css/web-development-tools/a/using-the-browser-developer-tools
(inspecting the webpage)
So the images are located in a 'image-hover-region' that is invisible, until we hover over a link and this adds a class called 'show' which in turn makes the image visible . opacity:0 to opacity:1
Screen Shot 2020-10-14 at 6.18.31 PM.png
Here you can see the image is pushed to the right.
I have done this by targeting the 'img' (image) within the 'image-hover-region'
My CSS:
.lay-imagehover-region img { margin-left:300px; }This is a basic CSS but you can feel free to adjust this to your needs.
Now if you wish to target a specific image, this can be done as each image has its own attribute number.
When inspecting the link we can see this:
Screen Shot 2020-10-14 at 6.18.42 PM.png
so we would add this to our code in order to target this specific image:
.lay-imagehover-region img[data-hoverimageid="125"] { margin-left:300px; }I hope helps you and good Luck! :)
Thank you for using Lay Theme
Best wishes
Richard