حركة CSS: تمرير الصورة عند التمرير بالمؤشر

في تصميم الويب، إضافة عناصر تفاعلية وجذابة يمكن أن تحسّن تجربة الزائر كثيرًا. ومن الطرق الممتعة لذلك إنشاء تأثير تمرير للصورة عند مرور المؤشر بحركة CSS. بأسطر قليلة من الشيفرة يمكنك تحويل صورة ثابتة إلى عنصر ديناميكي يلفت الانتباه. لنرَ كيف تضفي الحياة على موقعك بتمرير الصورة في CSS عند التمرير.

عرض توضيحي: مرّر المؤشر لرؤية حركة التمرير

HTML

<div class="container"> 
	<img src="YOUR-IMAGE"> 
</div>

CSS

img { 
	object-fit: cover;
	object-position: top;
	transition: ease-in-out 4s;
	width: 450px;
	height: 300px;
}
img:hover {
	object-position: bottom;
}