منوعات

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

واحة الأرنيين

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

تستخدم هذه الخاصية لعمل معارض الصور لعرض الصور بطريقة جميلة
هذا الكود يستخدم فى كل موضوع على حدة
يمكنك المعاينة


  

<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;
}


مقالات ذات صلة

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

هذا الموقع يستخدم Akismet للحدّ من التعليقات المزعجة والغير مرغوبة. تعرّف على كيفية معالجة بيانات تعليقك.

زر الذهاب إلى الأعلى
WordPress Cookie Plugin by Real Cookie Banner

أنت تستخدم إضافة Adblock

انت تستخدم اضافة حجب الاعلانات نرجوا الغاء تفعيلها لكي تتمكن من تصفح الموقع