کد تغییر اندازه تصاویر در CSS هنگام هاور
شاید در خیلی از سایت ها دیده اید که تصاویر شاخص بگونه ای است که وقتی ماوس را بر روی عکس میبریم یا به اصطلاح خودمون هاور Hover میکنیم عکس بدون اینکه سایزش تغییر کند بزرگ میشود .خب اکنون به شما آموزش خواهیم داد
کد تغییر اندازه تصاویر در CSS :
ابتدا کد عکس را برای شما میزاریم
<div id=”a4fran3″><img src=”آدرس” alt=”” width=”عرض” height=”طول” /></div>
ویرایش ها :
شما باید در قسمت ادرس ، لینک تصویر خودتان را بزارید و در قسمت عرض و طول عدد خود را جایگزین کنید
سپس استایل خودمان را مینویسیم:
#a4fran3 img:hover { -webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
برای اینکه عکس شما بزرگ نمایی داشته باشد باید اعداد داخل پرانتز را بزرگ تر 0 قرار دهید و اگر دوست دارید کوچک شود باید زیر صفر قرار دهید.
اگر قصد دارید تغییرات بر اسا زمان دلخواه شما انجام شود کد زیر را هم اضافه نمایید .
#a4fran3-takide img {-webkit-transition : all 2s ease-in-out;
-moz-transition : all 2s ease-in-out;
-o-transition : all 2s ease-in-out;
transition : all 2s ease-in-out;
}شما میتوانید عدد پیش فرض را تغییر دهید . عدد پیش فرض ما 2 ثانیه است شما میتوانید بر روی 1 ثانیه تنظیم نمایید و سرعت تغییرات در 1 ثانیه انجام میشود
