تكبير حجم الصورة داخل إطار بإستخدام CSS

تكبير حجم الصورة داخل إطار بإستخدام CSS

Amir Elsaeed

1:00 ص تأثيرات CSS , كورسات

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

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

Stack and Grow effect using css

درس النهارده مشابه له نوعا ما

عند تمرير المؤشر علي الصورة هيتم تكبير الصورة داخل الإطار وهيديك إحساس بإن الصوره بيتعملها zoom

كود الـ HTML للصورة

<div class="grow pic">

   <img alt="portrait" src="img.JPG" />

</div>

overflow: hidden;

هو الي بيمنع الصورة إنها تخرج عن الإطار

كود الـ CSS

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  background: #333;
}
 
.pic {
  border: 10px solid #fff; 
  float: left;
  height: 300px;
  width: 300px;
  margin: 20px;
  overflow: hidden;
   
  -webkit-box-shadow: 5px 5px 5px #111;
          box-shadow: 5px 5px 5px #111; 
}


/*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: 400px;
  height: 400px;
}

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

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