تأثير تكبير الصورة داخل إطار بمرور الماوس عليها image zoom css

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

والصلاة والسلام على أشرف المرسلين

سيدنا محمد وعلى آله وصحبه أجمعين


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

الكود:

<div class="hovergallery">
<img src="رابط الصورة 1">
<img src="رابط الصورة 2">
<img src="رابط الصورة 3">
<img src="رابط الصورة 4">
<img src="رابط الصورة 5">
<img src="رابط الصورة 6">
</div>

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */

.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}

.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}

</style><a href="http://conda3ianllkhir.blogspot.com"> Get it here </a>

طريقة التركيب بمدونات بلوجر:
رفع الصور بروابط مباشرة يمكنك الرفع من هــناااااا

هذا الكود يتم تطبيقه داخل الموضوع بمعنى أثناء تحرير الموضوع إنتقل إلى جهة تحرير HTML

ثم أضع روابط الصور بداخل هذا الكود

تنبيه : المرجو عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا  

بقلم Dr.Rasha Omran

مطورة تطبيقات الهاتف ، سفيرة ببرنامج Women Techmakers التابع لجوجل ، أهتم بالمحتوى الرقمى وأحببت أن أدون كل ما تعلمته فى هذا الموقع للإفادة فى أعمال هادفة