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

تعد الصور شيء مهم جداً في مشاركات بلوجر ولا يمكن الاستغناء عنها داخل المنشورات، وذلك لأن وجود الصور يساعد القارئ على فهم الموضوع بشكل أفضل. في هذا اليوم، سأقدم إضافة بسيطة وهي كيفية تحريك صور المدونة عند لمسها، في الواقع يعرف العديد من المدونين ومبرمجي القوالب هذه الإضافة. ولكن لا يزال هناك العديد من المبتدئين لا يعرفون كيفية جعل الصور تتحرك داخل المدونة، ولهذا السبب قمت بإنشاء هذا الموضوع فقط للمبتدئين.

كيفية تحريك صور المدونة عند لمسها

• انتقل الى منصة بلوجر 
• من القائمة الجانبية اضغط على المظهر
• اختر تحرير html
• ضع كود CSS أسفل الوسم ]]></b:skin> واضغط حفظ. 

.post-body img{
  display: inherit;
  transform-origin: center center; }
img:hover img{ animation-play-state: running; }

@keyframes img {
  20% { transform: translate(-1px, -5px) rotate(2.5deg); }
  40% { transform: translate(5px, 1px) rotate(-2.5deg); }
  60% { transform: translate(-1px, -5px) rotate(2.5deg); }
  80% { transform: translate(5px, 1px) rotate(-2.5deg); }
  0%, 100% { transform: translate(0, 0) rotate(0); } }

img:hover{
  animation-name: img;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;}

انتهى درس اليوم وهو كيفية جعل صور المدونة تتحرك عند لمسها عن طريق اكواد css، إذا كانت لديك اي أسئلة او استفسارات حول هذه الإضافة، يمكنك طرحها في التعليقات، كما نعتذر إذا كانت هناك أخطاء في بعض الكلمات. إذا وجدت هذه الإضافة مفيدة لا تنس مشاركتها مع أصدقائك.