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

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>



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

والسلام ختام​
 
عودة
أعلى