-->

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


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



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


كود الـ HTML للصورة
<div class="shrink pic">

   <img 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; 
}

/*SHRINK*/
.shrink img {
  height: 400px;
  width: 400px;
 
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
 
.shrink img:hover {
  width: 300px;
  height: 300px;
}

هناك تعليق واحد:

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

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