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

3 مشترك

اذهب الى الأسفل

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

مُساهمة من طرف سيد الكينج الثلاثاء 7 يوليو 2015 - 20:34

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

الكود

الكود:
<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>
avatar
سيد الكينج
 
 

ذكر
عدد المساهمات : 2715
معدل النشاط : 10238
السُمعة : 2

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف البرق200 الثلاثاء 7 يوليو 2015 - 20:54

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

الكود

الكود:
<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>
اهلا عزيزى  Cool
يوجد مشكلة فى اخر 4 صور على يسار تاكد من الكود !
البرق200
البرق200
 
 

ذكر
عدد المساهمات : 1618
معدل النشاط : 9370
السُمعة : 13

http://sea-alarab.com/montada-f19/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف البرق200 الثلاثاء 7 يوليو 2015 - 20:58

جرب الان
وتذكر تم تقريب من 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
البرق200
 
 

ذكر
عدد المساهمات : 1618
معدل النشاط : 9370
السُمعة : 13

http://sea-alarab.com/montada-f19/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف سيد الكينج الثلاثاء 7 يوليو 2015 - 21:07

البرق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>
انا وضعت صورتين فقط للتجربه .. انا لم الاحظ تقريب طيب ممكن تقرب اكثر بحيث الاحظ التقريب ؟ لان المسافه بعيدة لسه
avatar
سيد الكينج
 
 

ذكر
عدد المساهمات : 2715
معدل النشاط : 10238
السُمعة : 2

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف البرق200 الثلاثاء 7 يوليو 2015 - 21:25

سيد الكينج كتب:
البرق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
تعديل صغير جدا ع كود Uo_ouo41

Cool
البرق200
البرق200
 
 

ذكر
عدد المساهمات : 1618
معدل النشاط : 9370
السُمعة : 13

http://sea-alarab.com/montada-f19/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف البرق200 الثلاثاء 7 يوليو 2015 - 21:27

تفضل تقارب بنسبة 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>



وتذكر عزيزى

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

وفقك الله
............ Cool
البرق200
البرق200
 
 

ذكر
عدد المساهمات : 1618
معدل النشاط : 9370
السُمعة : 13

http://sea-alarab.com/montada-f19/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف سيد الكينج الأربعاء 8 يوليو 2015 - 17:50

البرق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>



وتذكر عزيزى

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

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

ذكر
عدد المساهمات : 2715
معدل النشاط : 10238
السُمعة : 2

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف البرق200 الأربعاء 8 يوليو 2015 - 21:55

سيد الكينج كتب:
البرق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>



وتذكر عزيزى

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

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

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

ذكر
عدد المساهمات : 1618
معدل النشاط : 9370
السُمعة : 13

http://sea-alarab.com/montada-f19/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف سيد الكينج الأربعاء 8 يوليو 2015 - 22:55

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

ذكر
عدد المساهمات : 2715
معدل النشاط : 10238
السُمعة : 2

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف سيد الكينج الأحد 12 يوليو 2015 - 1:22

up
avatar
سيد الكينج
 
 

ذكر
عدد المساهمات : 2715
معدل النشاط : 10238
السُمعة : 2

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف stones الأحد 12 يوليو 2015 - 5:02

بعد اذن الاخوه اعلاه
----------------
تفضل الكود
الكود:
       
<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
stones
 
 

ذكر
عدد المساهمات : 7462
معدل النشاط : 16418
السُمعة : 414

http://stones.arab.st/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف سيد الكينج الأحد 12 يوليو 2015 - 14:55

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>
اخي الان
 انا كل ما اجي احط لينك للصورة تنشال الصورة كيف اضع رابط للصورة اول ما يدوس عليها العضو يدخل عليها ؟
avatar
سيد الكينج
 
 

ذكر
عدد المساهمات : 2715
معدل النشاط : 10238
السُمعة : 2

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف stones الإثنين 13 يوليو 2015 - 2:10

تفضل الكود مع الروابط
الكود:
<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>
stones
stones
 
 

ذكر
عدد المساهمات : 7462
معدل النشاط : 16418
السُمعة : 414

http://stones.arab.st/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

الرجوع الى أعلى الصفحة

- مواضيع مماثلة

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى