تعديل صغير جدا ع كود

اريد تعديل هذا الكود باذن يتم تقليل مسافة كل صورة والثانية

الكود

الكود:

<div class="hovergallery"><img _moz_resizing="true" src="http://im69.gulfup.com/fQsb3a.jpg" /><img src="http://im69.gulfup.com/fQsb3a.jpg" /><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>

سيد الكينج كتب:اريد تعديل هذا الكود باذن يتم تقليل مسافة كل صورة والثانية

الكود

الكود:

<div class="hovergallery"><img _moz_resizing="true" src="http://im69.gulfup.com/fQsb3a.jpg" /><img src="http://im69.gulfup.com/fQsb3a.jpg" /><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>

اهلا عزيزى  
يوجد مشكلة فى اخر 4 صور على يسار تاكد من الكود !

جرب الان
وتذكر تم تقريب من 8 الى 10
+
اخر 4 صور على يسار غير موجوده

الكود:

        <div class="hovergallery"><img _moz_resizing="true" src="http://im69.gulfup.com/fQsb3a.jpg" /><img src="http://im69.gulfup.com/fQsb3a.jpg" /><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.9); /*Mozilla scale version*/
        -o-transform:scale(0.9); /*Opera scale version*/
        -webkit-transition-duration: 0.11s; /*Webkit: Animation duration*/
        -moz-transition-duration: 0.11s; /*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>

البرق200 كتب:جرب الان
وتذكر تم تقريب من 8 الى 10
+
اخر 4 صور على يسار غير موجوده

الكود:

        <div class="hovergallery"><img _moz_resizing="true" src="http://im69.gulfup.com/fQsb3a.jpg" /><img src="http://im69.gulfup.com/fQsb3a.jpg" /><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.9); /*Mozilla scale version*/
        -o-transform:scale(0.9); /*Opera scale version*/
        -webkit-transition-duration: 0.11s; /*Webkit: Animation duration*/
        -moz-transition-duration: 0.11s; /*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>

انا وضعت صورتين فقط للتجربه .. انا لم الاحظ تقريب طيب ممكن تقرب اكثر بحيث الاحظ التقريب ؟ لان المسافه بعيدة لسه

سيد الكينج كتب:

البرق200 كتب:جرب الان
وتذكر تم تقريب من 8 الى 10
+
اخر 4 صور على يسار غير موجوده

الكود:

        <div class="hovergallery"><img _moz_resizing="true" src="http://im69.gulfup.com/fQsb3a.jpg" /><img src="http://im69.gulfup.com/fQsb3a.jpg" /><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.9); /*Mozilla scale version*/
        -o-transform:scale(0.9); /*Opera scale version*/
        -webkit-transition-duration: 0.11s; /*Webkit: Animation duration*/
        -moz-transition-duration: 0.11s; /*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>

انا وضعت صورتين فقط للتجربه .. انا لم الاحظ تقريب طيب ممكن تقرب اكثر بحيث الاحظ التقريب ؟ لان المسافه بعيدة لسه

لآ فى فرق بعد التعديب وقبل التعديل
ونسبة كم اسلافت تقارب 8 من 10
https://i.servimg.com/u/f18/13/64/63/40/uo_ouo41.png

تفضل تقارب بنسبة 10 من 10
بعد التعديل

الكود:

                <div class="hovergallery"><img _moz_resizing="true" src="http://im69.gulfup.com/fQsb3a.jpg" /><img src="http://im69.gulfup.com/fQsb3a.jpg" /><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(1.0); /*Mozilla scale version*/
                -o-transform:scale(1.0); /*Opera scale version*/
                -webkit-transition-duration: 0.11s; /*Webkit: Animation duration*/
                -moz-transition-duration: 0.11s; /*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>

وتذكر عزيزى

الزعيم كتب:إذا حصلت على الجواب المقنع لسؤالك, لا تنس بتعديل موضوعك و وضع ايقونة تم الحل لتسهل عمل فريق المساعدة و تحافظ على النظام في منتدى الدعم.

وفقك الله
............

البرق200 كتب:تفضل تقارب بنسبة 10 من 10
بعد التعديل

الكود:

                <div class="hovergallery"><img _moz_resizing="true" src="http://im69.gulfup.com/fQsb3a.jpg" /><img src="http://im69.gulfup.com/fQsb3a.jpg" /><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(1.0); /*Mozilla scale version*/
                -o-transform:scale(1.0); /*Opera scale version*/
                -webkit-transition-duration: 0.11s; /*Webkit: Animation duration*/
                -moz-transition-duration: 0.11s; /*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>

وتذكر عزيزى

الزعيم كتب:إذا حصلت على الجواب المقنع لسؤالك, لا تنس بتعديل موضوعك و وضع ايقونة تم الحل لتسهل عمل فريق المساعدة و تحافظ على النظام في منتدى الدعم.

وفقك الله
............

اخي الحبيب . معلش تعبتك معي .. لكن احتاج الي معرفة شئ هل من الممكن اضافة صورة فرعيه بجانب صور الكود ؟ يعني تكون بجانبهم بالصفحه لكن لن تتبع الكود لان كل لما بحاول اعمل كدا تكون الصورة الفرعيه فوق والكود تحت او العكس لكن لا يقفون بجانب بعضهم البعض

سيد الكينج كتب:

البرق200 كتب:تفضل تقارب بنسبة 10 من 10
بعد التعديل

الكود:

                <div class="hovergallery"><img _moz_resizing="true" src="http://im69.gulfup.com/fQsb3a.jpg" /><img src="http://im69.gulfup.com/fQsb3a.jpg" /><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(1.0); /*Mozilla scale version*/
                -o-transform:scale(1.0); /*Opera scale version*/
                -webkit-transition-duration: 0.11s; /*Webkit: Animation duration*/
                -moz-transition-duration: 0.11s; /*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>

وتذكر عزيزى

الزعيم كتب:إذا حصلت على الجواب المقنع لسؤالك, لا تنس بتعديل موضوعك و وضع ايقونة تم الحل لتسهل عمل فريق المساعدة و تحافظ على النظام في منتدى الدعم.

وفقك الله
............

اخي الحبيب . معلش تعبتك معي .. لكن احتاج الي معرفة شئ هل من الممكن اضافة صورة فرعيه بجانب صور الكود ؟ يعني تكون بجانبهم بالصفحه لكن لن تتبع الكود لان كل لما بحاول اعمل كدا تكون الصورة الفرعيه فوق والكود تحت او العكس لكن لا يقفون بجانب بعضهم البعض

وضح طلبك اكثر اخى العزيز

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

up

بعد اذن الاخوه اعلاه
----------------
تفضل الكود

الكود:

       
<div class="hovergallery">
                   <img _moz_resizing="true" src="http://im69.gulfup.com/fQsb3a.jpg" /><img src="http://im69.gulfup.com/fQsb3a.jpg" /><img src="http://im69.gulfup.com/fQsb3a.jpg" /><img src="  http://im69.gulfup.com/fQsb3a.jpg" /><img src="http://im69.gulfup.com/fQsb3a.jpg" /><img src="http://im69.gulfup.com/fQsb3a.jpg" />        
</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 {
margin: -20px ;
         }
        .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>

لاكن تظهر بمظهر غير مناسب يجب تقليل الصور


وهذا كود اخر لاكن تصغر الصور

الكود:

       
<div class="hovergallery">
                                                 <img _moz_resizing="true" src="http://im69.gulfup.com/fQsb3a.jpg" /><img src="http://im69.gulfup.com/fQsb3a.jpg" /><img src="http://im69.gulfup.com/fQsb3a.jpg" /><img src="  http://im69.gulfup.com/fQsb3a.jpg" /><img src="http://im69.gulfup.com/fQsb3a.jpg" /><img src="http://im69.gulfup.com/fQsb3a.jpg" />        
</div>
         <style type="text/css">
        
        /*Credits: Dynamic Drive CSS Library */
        
        .hovergallery img{
        -webkit-transform:scale(0.5); /*Webkit: Scale down image to 0.5x original size*/
        -moz-transform:scale(0.8); /*Mozilla scale version*/
        -o-transform:scale(0.8); /*Opera scale version*/
        -webkit-transition-duration: 0.3s; /*Webkit: Animation duration*/
        -moz-transition-duration: 0.3s; /*Mozilla duration version*/
        -o-transition-duration: 0.3s; /*Opera duration version*/
        opacity: 0.3; /*initial opacity of images*/
        margin: 5 5px 5px 5; /*margin between images*/


        }



        .hovergallery img {
margin: -30px ;





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

        }
        </style>

وهذا اخر صور على بعض

الكود:

       
<div class="hovergallery">
               <img _moz_resizing="true" src="http://im69.gulfup.com/fQsb3a.jpg" /><img src="http://im69.gulfup.com/fQsb3a.jpg" /><img src="http://im69.gulfup.com/fQsb3a.jpg" /><img src="http://im69.gulfup.com/fQsb3a.jpg" /><img src=" http://im69.gulfup.com/fQsb3a.jpg" /><img src="http://im69.gulfup.com/fQsb3a.jpg" />       
</div>
        <style type="text/css">
       
        /*Credits: Dynamic Drive CSS Library */
       
        .hovergallery img{
        -webkit-transform:scale(0.2); /*Webkit: Scale down image to 0.2x original size*/
        -moz-transform:scale(0.-4); /*Mozilla scale version*/
        -o-transform:scale(0.-4); /*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.2); /*Webkit: Scale up image to 1.2x original size*/
        -moz-transform:scale(1.2); /*Mozilla scale version*/
        -o-transform:scale(1.2); /*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>

stones كتب:بعد اذن الاخوه اعلاه
----------------
تفضل الكود

الكود:

       
<div class="hovergallery">
                   <img _moz_resizing="true" src="http://im69.gulfup.com/fQsb3a.jpg" /><img src="http://im69.gulfup.com/fQsb3a.jpg" /><img src="http://im69.gulfup.com/fQsb3a.jpg" /><img src="  http://im69.gulfup.com/fQsb3a.jpg" /><img src="http://im69.gulfup.com/fQsb3a.jpg" /><img src="http://im69.gulfup.com/fQsb3a.jpg" />        
</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 {
margin: -20px ;
         }
        .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>

لاكن تظهر بمظهر غير مناسب يجب تقليل الصور


وهذا كود اخر لاكن تصغر الصور

الكود:

       
<div class="hovergallery">
                                                 <img _moz_resizing="true" src="http://im69.gulfup.com/fQsb3a.jpg" /><img src="http://im69.gulfup.com/fQsb3a.jpg" /><img src="http://im69.gulfup.com/fQsb3a.jpg" /><img src="  http://im69.gulfup.com/fQsb3a.jpg" /><img src="http://im69.gulfup.com/fQsb3a.jpg" /><img src="http://im69.gulfup.com/fQsb3a.jpg" />        
</div>
         <style type="text/css">
        
        /*Credits: Dynamic Drive CSS Library */
        
        .hovergallery img{
        -webkit-transform:scale(0.5); /*Webkit: Scale down image to 0.5x original size*/
        -moz-transform:scale(0.8); /*Mozilla scale version*/
        -o-transform:scale(0.8); /*Opera scale version*/
        -webkit-transition-duration: 0.3s; /*Webkit: Animation duration*/
        -moz-transition-duration: 0.3s; /*Mozilla duration version*/
        -o-transition-duration: 0.3s; /*Opera duration version*/
        opacity: 0.3; /*initial opacity of images*/
        margin: 5 5px 5px 5; /*margin between images*/


        }



        .hovergallery img {
margin: -30px ;





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

        }
        </style>

وهذا اخر صور على بعض

الكود:

        
<div class="hovergallery">
            <img _moz_resizing="true" src="http://im69.gulfup.com/fQsb3a.jpg" /><img src="http://im69.gulfup.com/fQsb3a.jpg" /><img src="http://im69.gulfup.com/fQsb3a.jpg" /><img src="http://im69.gulfup.com/fQsb3a.jpg" /><img src=" http://im69.gulfup.com/fQsb3a.jpg" /><img src="http://im69.gulfup.com/fQsb3a.jpg" />        
</div>
         <style type="text/css">
        
        /*Credits: Dynamic Drive CSS Library */
        
        .hovergallery img{
        -webkit-transform:scale(0.2); /*Webkit: Scale down image to 0.2x original size*/
        -moz-transform:scale(0.-4); /*Mozilla scale version*/
        -o-transform:scale(0.-4); /*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.2); /*Webkit: Scale up image to 1.2x original size*/
        -moz-transform:scale(1.2); /*Mozilla scale version*/
        -o-transform:scale(1.2); /*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>

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

تفضل الكود مع الروابط

الكود:

<div class="hovergallery">
 <a href="رابط الموضوع" target="_blank"><img src="http://im69.gulfup.com/fQsb3a.jpg" />
</a> <a href="رابط الموضوع" target="_blank"><img src="http://im69.gulfup.com/fQsb3a.jpg" />
</a> <a href="رابط الموضوع" target="_blank"><img src="http://im69.gulfup.com/fQsb3a.jpg" />
</a> <a href="رابط الموضوع" target="_blank"><img src="http://im69.gulfup.com/fQsb3a.jpg" />
</a> <a href="رابط الموضوع" target="_blank"><img src=" http://im69.gulfup.com/fQsb3a.jpg" />
</a> <a href="رابط الموضوع" target="_blank"><img src="http://im69.gulfup.com/fQsb3a.jpg" /></a>
</div>
        <style type="text/css">
      
        /*Credits: Dynamic Drive CSS Library */
      
        .hovergallery img{
        -webkit-transform:scale(0.2); /*Webkit: Scale down image to 0.2x original size*/
        -moz-transform:scale(0.-4); /*Mozilla scale version*/
        -o-transform:scale(0.-4); /*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.2); /*Webkit: Scale up image to 1.2x original size*/
        -moz-transform:scale(1.2); /*Mozilla scale version*/
        -o-transform:scale(1.2); /*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>

وهذا كود اخر مع حجم الصور من الارقام جنب الصور

الكود:

<div class="hovergallery">
    <a href="رابط موضوع" target="_blank">
<img style="width: 150px; height: 150px;" src="رابط صورة" />
</a> <a href="رابط موضوع" target="_blank">
<img style="width: 150px; height: 150px;" src="رابط صورة" />
</a> <a href="رابط موضوع" target="_blank">
<img style="width: 150px; height: 150px;" src="رابط صورة" />
</a> <a href="رابط موضوع" target="_blank">
<img style="width: 150px; height: 150px;" src="رابط صورة" />
</a> <a href="رابط موضوع" target="_blank">
<img style="width: 150px; height: 150px;" src=" رابط صورة" />
</a> <a href="رابط موضوع" target="_blank">
 <img style="width: 150px; height: 150px;" src="رابط صورة" /></a>
</div>
        <style type="text/css">
     
        /*Credits: Dynamic Drive CSS Library */
     
        .hovergallery img{
        -webkit-transform:scale(0.2); /*Webkit: Scale down image to 0.2x original size*/
        -moz-transform:scale(0.-4); /*Mozilla scale version*/
        -o-transform:scale(0.-4); /*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.2); /*Webkit: Scale up image to 1.2x original size*/
        -moz-transform:scale(1.2); /*Mozilla scale version*/
        -o-transform:scale(1.2); /*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>