-->

تأثير Bump Up بالـ CSS


السلام عليكم ورحمة الله وبركاته . . . ~



 الدرس عبارة عن شرح تأثير لتحريك الصور لأعلي باستخدام الـ CSS

Bump up using css


يستخدم هذا التطبيق لعرض مجموعه صور أفقية .

عند تمرير مؤشر الماوس علي الصور سوف تحصل علي تأثير موجه رائع . :)

شرح التأثير ببساطه هو عمل margin للصور

وفي الـ hover عند تمرير الماوس نعمل margin بقيمه أصغر

ده هيخلي الصورة تتحرك للأعلي

علشان نخلي حركة الصورة ناعمه هنستخدم transition






أولا كود الـ HTML

بداخل الـ body

هتحط الصور إلي انت عاوزها

<div class="bump-up">

        <img src="img1.gif">

        <img src="img2.gif">

        <img src="img3.gif">

        <img src="img4.gif">

</div>

بالنسبة لكود الـ css 

.bump-up img{
    border: 5px solid #ccc;
    float: left;
    margin: 15px;
    -webkit-transition: margin 0.5s ease-out;
    -moz-transition: margin 0.5s ease-out;
    -o-transition: margin 0.5s ease-out;
}

.bump-up img:hover {
    margin-top: 2px;
}






ليس هنالك تعليقات :

إرسال تعليق

جميع الحقوق محفوظة لموقع © Elmohandes

تصميم : مصطفى صلاح