وضع Div يعتمد على حجم الصورة؟

0

على صفحة الويب لدي قسم حاويات به صورة وقسم يظهر على يمين الحاوية عند التمرير فوق قسم الحاوية. الحاوية لها موضع نسبي بينما div div لديه موقع مطلق (يجب أن تبقى div window داخل div div لسبب آخر). مشكلتي هي أنه إذا كانت الصورة صغيرة ، فسيكون قسم النافذة خلف وضعه خلف الحاوية / الصورة ولن يتم وضعه على يمينها.

.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>

هل هناك طريقة في CSS حيث يمكن أن تبقى div div حوالي 5 بكسل أو نحو ذلك على يمين الحاوية بغض النظر عن حجم الصورة؟ لم يكن JSFiddle يعمل بشكل صحيح ولكني أبحث عن وضع مثل هذا: https://www.jqueryscript.net/demo/Simple-Image-Hover-Zoom-Plugin-With-jQuery-spzoom/

اي اقتراح قد يكون مفيد جدا. شكرا لكم!

1 إجابة

0

يمكنك استخدام هذا

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

أسئلة ذات صلة

فوق
قائمة طعام