Div positioning depending on image size?

Question

On my webpage I have a container div with an image and a div that shows to the right of the container when you hover over the container div. The container has a relative position while the window div has a absolute position (The window div has to stay inside the container div for another reason). My problem is that if the image is small, the window div will be behind positioned behind the container/image and not positioned to the right of it.

.container {
	position: relative;
	display: inline-flex;
	flex-wrap: wrap;
	flex-direction: row;
	max-width: 45%;
	float: left;
}

#img1 {
	width: 100%;
	height: auto;
	margin: 3% 0 0 0 !important;
}

.window {
	width: 300px;
	height: 300px;
	top: 0%;
	left: 80%;
	margin-left: -200px !important;
	z-index: 1;
}

.container:hover .window {
	left: 150%;
	top: -5%;
}

<div class="container">
	<img id="img1" src="whatever" />
	<div class="window"></div>
</div>

Is there a way in CSS where the window div can stay about 5 pixels or so to the right of the container no matter the size of the image? JSFiddle wasn't working properly but I am looking for positioning like this: https://www.jqueryscript.net/demo/Simple-Image-Hover-Zoom-Plugin-With-jQuery-spzoom/

Any suggestions would be very helpful. Thank you!

Answer 1

You can use this

.window {
    right: -10px;
    position: absolute;
    transform: translate(100%,0);
}