عمل ألبوم صور فى التدوينه أو فى المدونه عموما بتأثير جميل جدا عند مرور الماوس عليه

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

أحضرت لكم اليوم طريقه جديده وتأثير جميل جدا على البوم الصور الذى نريد إضافته أو مجموعة الصور المراد وضعهم فى ألبوم واحد, والتأثير يحدث عند مرورك بمؤشر الماوس على الصور وتكون الصور فى البدايه كالتالى :

ثم تصبح كالتالى عند مرور الماوس عليها :

ثم تعود مره اخرى بعد ابعاد الماوس من عليها إلى وضعها الأول.

ناتى لمرحلة التنفيذ والأكواد الآن :

المرحله الاولى بعمل كود HTML للصور :
لوضع الألبوم فى داخل التدوينه سوف نستخدم تعديل HTML الخاص بالتدوينه التى نقوم بتدوينها ونضع هذا الكود فى المكان الذى نود وضع الألبوم فيه

<a href="javascript:void(0);" class="album">
  <img src="URLIMAGEN_1" class="photo1" />
  <img src="URLIMAGEN_2" class="photo2" />
  <img src="URLIMAGEN_3" class="photo3" />
</a>

مع مراعاة استبدال الكلام باللون الأحمر بروابط الصور المراد وضعها فى الألبوم, ثم نقم بحفظ التدوينه.

ولو أردنا وضع الألبوم فى أى مكان آخر فى المدونه كل ما علينا فعله هو عمل إضافة أداة HTML/JAVASCRIPT ولصق الكود السابق بها ثم عمل حفظ.

المرحله الثانيه وهى إضافة تأثير CSS على الكود ونقوم بإتباع الآتى :
إذهب إلى تحرير HTML الخاص بقالب المدونه وقم بالبحث عن

</head>

 ثم قبله مباشرة ضع الكود التالى :

<style>
  .album {
    display:block;
    position: relative;
    vertical-align: top;
    width: 250px;
    z-index: 5;
  }
  .album img {
    border: 10px solid #ABC;
    display: block;
    height: 250px;
    left: 0;
    position: absolute;
    top: 0;
    width: 250px;
  }
  /* un agregado para que las imágenes se ponga en primer plano */
  .album img:hover {
    z-index: 1000;
  }
@-moz-keyframes image1 {
    0% {-moz-transform: rotate(0deg) translate(0, 0) scale(1.0);}
    100% {-moz-transform: rotate(-6deg) translate(-130px, -3px) scale(1.1);}
  }
  @-webkit-keyframes image1 {
    0% {-webkit-transform: rotate(0deg) translate(0, 0) scale(1.0);}
    100% {-webkit-transform: rotate(-6deg) translate(-130px, -3px) scale(1.1);}
  }

  @-moz-keyframes image2 {
    0% {-moz-transform: rotate(0deg) translate(0, 0) scale(1.0);}
    100% {-moz-transform: rotate(0deg) translate(0, -3px) scale(1.1);}
  }
  @-webkit-keyframes image2 {
    0% {-webkit-transform: rotate(0deg) translate(0, 0) scale(1.0);}
    100% {-webkit-transform: rotate(0deg) translate(0, -3px) scale(1.1);}
  }

  @-moz-keyframes image3 {
    0% {-moz-transform: rotate(0deg) translate(0, 0) scale(1.0);}
    100% {-moz-transform: rotate(6deg) translate(130px, -3px) scale(1.1);}
  }
  @-webkit-keyframes image3 {
    0% {-webkit-transform: rotate(0deg) translate(0, 0) scale(1.0);}
    100% {-webkit-transform: rotate(6deg) translate(130px, -3px) scale(1.1);}
  }

  .album:hover .photo1, .album:focus .photo1 {
    -moz-animation-name: image1;
    -moz-animation-duration: .2s;
    -moz-transform: rotate(-6deg) translate(-130px, -3px) scale(1.1);
    -webkit-animation-name: image1;
    -webkit-animation-duration: .2s;
    -webkit-transform: rotate(-6deg) translate(-130px, -3px) scale(1.1);
  }
  .album:hover .photo2, .album:focus .photo2 {
    -moz-animation-name: image2;
    -moz-animation-duration: .2s;
    -moz-transform: rotate(0deg) translate(0, -3px) scale(1.1);
    -webkit-animation-name: image2;
    -webkit-animation-duration: .2s;
    -webkit-transform: rotate(0deg) translate(0, -3px) scale(1.1);
  }
  .album:hover .photo3, .album:focus .photo3 {
    -moz-animation-name: image3;
    -moz-animation-duration: .2s;
   -moz-transform: rotate(6deg) translate(130px, -3px) scale(1.1);
    -webkit-animation-name: image3;
    -webkit-animation-duration: .2s;
    -webkit-transform: rotate(6deg) translate(130px, -3px) scale(1.1);
  }
</style>

ثم قم بحفظ القالب.

والآن قد إنتهينا وتستطيع نشر تدوينتك وترى التأثير على مجموعة الصور.

للعلم : الكود الأول الخاص بالصور عليك إستخدامه فى كل مره تود فيها اضافة البوم جديد أو مجموعة صور جديده أما الكود الثانى الخاص بإضافة تاثير CSS على مجموعة الصور أو الالبوم يضاف مره واحده فقط ويحفظ علىها ويعمل هو أوتوماتيكيا مع كل مجموعات الصور التى ستستخدم فيها الكود الاول.