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

شرح اضافة تأثير أبيض واسود على الصورة عند مرور الماوس عليها
في درس جديد من دورة تصميم المواقع (القوالب والاستايلات) اقدم لكم درس لاضافة تأثير 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>

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