الجمعة، 19 أغسطس 2016

ألا يمكن لحسوب إضافة هته الخاصية

خاصية توسع الصورة:

كود HTML

       <div class="grow pic">
       <img src="http://ift.tt/1BGT0wk; alt="portrait">
       </div>

كود CSS

  /*GROW*/
   .grow img {
   height: 300px;
  width: 300px;

 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
   -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
      transition: all 1s ease;
     }

   .grow img:hover {
  width: 500px;
  height: 500px;
 }

الخاصية تعمل على توسيع الصورة بمجرد مرور الفأرة عليها حيث تم تصغير الصورة إلى 300px وعندما يقوم المستخدم بتمرير الفائرة على الصورة يصبح الحجم 500px وهذا ما يؤدي الى تأثير التكبير.

يمكنك تعديل الأرقام على رابط المعاينة لجعل الصورة أكبر

رابط المعاينة على موقع Codepen

http://ift.tt/2boz1Zj



from حسوب I/O - الأكثر شيوعاً http://ift.tt/2b4EV79
مرسلة بواسطة في
التسميات:

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

إرسال تعليق

دائماً، رأيكم يهمنا،

الاشتراك في: تعليقات الرسالة (Atom)