تأثير Bump Up بالـ 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; }
ليس هنالك تعليقات :
إرسال تعليق