اشواق وحنين: كود رائع جدا لظهور الصور ابيض واسود وظهور الالوان وتكبيرها عند مرور الماوس عليها فى المشاركات على بلوجر

أهلاً بكم في موقعنا .. ونتمنى لكم ان تستمتعوا بمواضيعنا وأختياراتنا المنوعة .. وشكراً لاختياركم أشواق وحنين .. كما يسعدنا ويشرفنا انضمامكم لنا على الفيس بوك بـ أشواق وحنين

نقدم لكم اليوم كود html أكثر من راااااائع يوضع فى المشاركات لظهور الصور ابيض واسود وعند مرور الماوس تظهر الوانها ويكبر حجمها
كل ما عليك فعله عند كتابة مشاركة اضغط على html وضع الكود التالى :

<html>
<head>
<title>image test</title>

<style>
            #image
            {

                filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale");
                filter: grayscale(100%);
                -webkit-filter: grayscale(100%);
                -moz-filter: grayscale(100%);
                -ms-filter: grayscale(100%);
                -o-filter: grayscale(100%);

                -webkit-transition: filter 1s;
                -moz-transition: filter 1s;
                -o-transition: filter 1s;
                transition: filter 1s;

                display: block;
                margin: 25px auto;

            }
            #image:hover
            {
                -webkit-filter: grayscale(0);
                -moz-filter: grayscale(0);
                -ms-filter: grayscale(0);
                -o-filter: grayscale(0);
                filter: none;

                -webkit-transform: scale(1.2);
                -moz-transform: scale(1.2);
                -o-transform: scale(1.2);
                transform: scale(1.2);
            }
        </style>
</head>
<body>
<img id="image" src="ضع رابط صورة هنا" />
<img id="image" src="ضع رابط صورة هنا" />
<img id="image" src="ضع رابط صورة هنا" />
</body>
</html>

بعد ذلك ضع روابط الصور التى تريد اظهارها مكان ضع رابط صورة هنا
اذا كنت تريد زيادة عدد الصور فقط زود هذا الكود التالى بعدد الصور التى تريد ظهورها

<img id="image" src="ضع رابط صورة هنا" />

ملاحظة هامة
الكود يعمل جيداا على متصفح الموزيلا فايرفكس ولكن على الاوبرا تظهر الصور بالالوان كما هى وليست بالابيض والاسود
وهذه صور للمعاينة
مرر عليها الماوس وشاهد ماذا ترى

image test