كود css+html لعمل تأثير zoom على الصور ,, جميل جدا

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

كود css+html لعمل تأثير zoom على الصور ,, جميل جدا

الموضوع السابق الموضوع التاليمركز رفع الصور
Posted By

Moh'd S Hammoudeh


انشرالموضوع
الرد عن طريق الفيس بوك
الابلاغ عن الموضوع




مواقع صديقة
All Tricks And Tips
Entertainment
أضف موقعك هنا
أضف موقعك هنا


صفحات فيسبوكية رائعة
All Tricks And Tips
Entertainment
المحاسبين
موقع جنتل الاردن
أضف صفحتك هنا
أضف صفحتك هنا


صفحتنا الرسمية على الفيس بوك

صفحتنا الرسمية على تويتر



الأحد أغسطس 04, 2013 6:21 am ساندنا على الفيس بوك  ساندنا على اليوتيوب ساندنا على تويـــــــتر








السلام عليكم ورحمة الله

نقدم لكم هذا الكود الذي يحتاجه أغلب المصممين لزيادة جمالية تصميمهم 

هذا الكود يقوم بعمل zoom عند مرور الماوس على الصورة 

صورة للكود 






الرمز:
<!-- Algantel.com -->

<div class="hovergallery">
<img src="http://i38.servimg.com/u/f38/14/82/58/44/1112.jpg" />
<img src="http://i38.servimg.com/u/f38/14/82/58/44/1311.jpg" />
<img src="http://i38.servimg.com/u/f38/14/82/58/44/1510.jpg" />
<img src="http://i38.servimg.com/u/f38/14/82/58/44/3110.jpg" />
</div>

<style type="text/css">

.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>
<!-- Algantel.com -->



فقط قم بتغيير روابط الصور الموجوده في الكود الى روابط الصور التي تريدها

وبالتوفيق للجميع 










جميع المواضيع و الردود تعبر عن رأي صاحبها ولا تعبر عن رأي إداره موقع جنتل الاردن بــتــاتــآ
الرجوع الى أعلى الصفحة اذهب الى الأسفل
 

الموضوع السابق الموضوع التالي
صفحة 1 من اصل 1








جميع الحقوق محفوظة لبوابة جنتل الاردن © 2013