Image Hover addon size and place

[Nunomaio]

Hello,
I'm using the image hover addon, I have list and I want the images to appear always in the same place (left) with the same high when using vertical images and same with when using horizontal images. Also would be great if the images can resize depending on the size of the window you are viewing it.

Is it possible?

Thank you in advance

[Richard]

Dear @Nunomaio

This is possible, Within the Imagehover Addon options you can use % instead of px to define widths and heights, if more is needed you could use VW or VH units (viewport width & viewport Height), then the images will be scaled based on a users browser window (viewport)

If you wish to force the Images to the left, i would suggest using the "fixed % centered" option and then adding some Custom CSS that pushes it to the left.

Screenshots of what you wish to achieve is always helpful as well as a link to the Website in question.

For more information on Custom CSS styling:
https://laytheme.com/documentation.html#custom-css-styling

Best wishes
Richard

[Nunomaio]

@Richard-K thank you so much for your answer!

So, this is what's looking like right now, and sometime the images appear in the right side of the page behind the text.

This is what im looking for, images always in the same place with the same size, and same margins.
And I want the images to resize in the same place depending on the viewport size. Is it possible?

Here's my website link: nunomaio.com

Thank you! :)

Best
Nuno

[Richard]

Dear @Nunomaio

First you need to set the options for Imagehover;
Fixed & centered, then set your Widths and Heights:

From there you can address the 'imagehover region' with CSS:

.lay-imagehover-region

But one must come before the other :)

Best wishes
Richard

[Nunomaio]

Hi @Richard-K
Thanks for you answer!

I got a bit lost with the css part, can you explain me how the code works please? and what i should write.

Thank you!

[Richard]

Dear @Nunomaio

Sure :)

All the Images used with Imagehover are there, however they have a Opacity:0 so that they cant be seen - a specific image is given visibility when the link is hovered and we can see it.

The Images are grouped in a <div> with the Class: "lay-imagehover-region"

We can use this class to Target all the images collectively and then shift them as a group to the left as you wished. This is why having them set with the option 'Fixed & centered' will help you.

Custom CSS Code can be placed either in the CSS area in > Customize > CSS or - In "Lay Options - Custom CSS & HTML"

To target the ImageHover region with CSS:

.lay-imagehover-region{

//insert you code here//

}

There are a few options for moving the group and this depends on you and what you need for your design:

https://www.w3schools.com/css/css_margin.asp

https://www.w3schools.com/css/css3_2dtransforms.asp

Also the 'Calc()' function may help you:
https://developer.mozilla.org/en-US/docs/Web/CSS/calc()

Also to remember you can use different 'units' depending on your needs:
https://www.w3schools.com/cssref/css_units.asp

This is unlikely what you will end up using but to help you, some code may look like this:

.lay-imagehover-region{

margin-left:50px;

}

'!important is used when we want to override or Force a particular CSS to be used, note that it should be used sparingly and only if needed. It will override any current CSS set with Lay Theme. In this Case if the imagehover region already had a 'margin-left' CSS entry, your new entry would take precedence:

.lay-imagehover-region{

margin-left:50px !important;

}

Hope this have been helpful and best wishes - Remember Google is your friend and there is such helpful content out there for CSS.

Richard

[AUR]

This post is deleted!

[Miquel Pérez]

@Richard said in Image Hover addon size and place:

https://www.w3schools.com/cssref/css_units.asp

Hey Richard!

I have managed to move the image to the sides but the scaling on diferent browser's sites is not working properly. How do you use the VW and VH to set this responsive to every window size?

Thnks

[Richard]

Dear Miquel

@Miquel-Pérez

What is your setup & are you able to post a link to your website 🔍 Also if you could post your current CSS for these changes?

---

Best wishes

RIchard