حركة CSS فقط: تبديل الصورة عند التمرير (تبديل الشعار)

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

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

HTML

<div class="swap">
	<a href="https://wedesignorange.com">
		<img class="main" src="YOUR-MAIN-IMAGE" />
		<img class="hover" src="YOUR-SWAPPING-IMAGE" />
	</a>
</div>

CSS

.swap { height: 200px; width: 200px; position: relative; }
.swap img {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	transition: opacity .9s;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.swap img.hover, .swap:hover img.main { opacity:0; }
.swap img.hover:hover { opacity:1; }