تأثير Stack & Grow بالـ CSS

تأثير Stack & Grow بالـ CSS

Amir Elsaeed

12:16 ص تأثيرات CSS , كورسات

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


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

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

عند تمرير مؤشر الماوس علي الصورة هيزيد حجمها

أولا : أكواد الـ  HTML

بداخل الـ body

 هتنستخدم الأكواد دي

تقدر تضيف الصور إلي انت عاوزها يفضل انها تكون نفس المقاسات

<div id="container">

     <div id="grow">

         <img src="img1.gif">

         <img src="img2.gif">

         <img src="img3.gif"> 

     </div>

    </div>

وكود الـ css سيكون بالشكل التالي

#container { 
 width: 300px; 
 margin: 0 auto;
}

#grow img{
 height: 100px; 
 width: 300px; 
 margin: 15px 0; 
 -webkit-transition: all 1s ease; 
 -moz-transition: all 1s ease; 
 -o-transition: all 1s ease; 
} 

#grow img:hover { 
 height: 133px; 
 width: 400px; 
 margin-left: -50px; 
} 

شارك المقالة فيس بوك تويتر جوجل بلس لينكد إن

مقالات ذات صلة