تحريك الصورة بشكل أفقي باستخدام CSS

تحريك الصورة بشكل أفقي باستخدام CSS

Amir Elsaeed

1:30 م تأثيرات CSS , كورسات

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

درس اليوم بسيط وجميل

وهو تحريك الصورة للجنب بشكل أفقي داخل إطار بشكل رائع

كود الـ html

<div class="sidepan pic">
  <img src="http://lorempixel.com/600/300/sports/8">
</div>

كود الـ 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; 
}

/*SIDEPAN*/
.sidepan img {
  margin-left: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}
 
.sidepan img:hover {
  margin-left: -200px;
}

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

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