اضافة تأثير تكبير الصورة بمرور الماوس عليها معرض للصور

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

لإضافة التأثير ماعليك سوى وضع الكود التالي في الجزء الخاص ب HTML
و قم بالستبدال ''رابط الصورة''  بروابط الصور.

<div class="hovergallery">
<img src="رابط الصورة 1">
<img src="رابط الصورة 2">
<img src="رابط الصورة 3">
<img src="رابط الصورة 4">
<img src="رابط الصورة 5">
<img src="رابط الصورة 6">
</div>

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */

.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}

.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}

</style><a href="http://Hukmat.blogspot.com"> Get it here </a>

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