How to fix a hover image to a position when rescaling browser

[Miquel Pérez]

Hi,

I have some hover images that i moved to the left of my site but when i rescale the browser the images are not fixed to it's "natural" position. I will attach a video link to show it.

https://youtu.be/w4pWg73ejwc

The CSS looks like this:

.lay-imagehover-region img{
margin-left:-24.5vw;
margin-top:4vh;
width: 48% !important;
height: auto !important;
position: absolute;
}
The link of the site is: www.juliaesque.com

I will really appreciate a response, thanks.

[gschill]

Hi,
have you found a solution for this problem?
Would be great, if you could share it.

Thank you very much

[gschill]

Hi,
I found a solution, that was working for me.
Maybe it helps someone … (and maybe the code has to be improved … sorry I am not a professional …)

.lay-imagehover-region img {
position: absolute;
width: 35% !important;
height: auto !important;
top:0 !important;
padding-top: 1.5%;
margin-left: 27.5vw;
vertical-align: top !important;
transform: translateY(-50%) !important;
transform: translateX(-50%) !important;
}

[Richard]

Thank you for adding your solution @gschill !! ⭐️