شرح اضافة تأثير أبيض واسود على الصورة عند مرور الماوس عليها

[Admin]

بسم الله الرحمن الرحيم



شرح اضافة تأثير أبيض واسود على الصورة عند مرور الماوس عليها

في درس جديد من دورة تصميم المواقع (القوالب والاستايلات) اقدم لكم درس لاضافة تأثير hover على الصور من خلال اكواد الـ css وفي هذا الدرس

اقوم بشرح كيفية اضافة فلتر الابيض والاسود للصورة عند مرور المؤشر عليها بالاضافة الى تغيير شكل المؤشر عند مروره على الصورة

درس بسيط وسهل جدا وان شاء الله تستفيدوا



فيديو الشرح :

الاكواد المستخدمة :

<style>
body {
background: #2173CF;
}
.container {
display: flex;
justify-content: space-around;
alighn-items: center;
width: 90%;
margin: auto;
}

img:hover {
cursor: pointer;
filter: grayscale(100%)
}

</style>

<div class="container">
<img src="https://i.servimg.com/u/f93/15/47/21/99/3812.png">
</div>

بالتوفيق للجميع

والسلام ختام​