ایجاد افکت های جالب بر روی تصاویر در وبسایت با CSS به همراه دمو

در این پست قرار است چند نمونه از افکت های زیبا و تاثیر گذاری که بوسیله CSS بر روی فایل های تصویری ایجاد می شود معرفی و نحوه استفاده از آنها را آموزش دهیم.

بدون هیچ مقدمه و مطلب اضافی و قبل از هر توضیحی از دموی این افکت ها بازدید نمائید تا تاثیر گذاری آن را مشاهده فرمائید.

دمو DEMO

برای ایجاد این افکت ها نخست لازم است شما فایل CSS را در دسترس داشته باشید تا با فراخوانی آن توسط کدهای HTML که در انتهای صفحه بدان اشاره شده است بتوانید افکت های مورد نظرتان را اعمال کنید، برای در دسترس قرار دادن CSS راه های مختلفی موجود است که شما می توانید یکی از این سه روش ذکر شده در زیر را انجام دهید:

 

1- فایل CSS  را از این لینک دانلود کرده و در روت هاست خود آپلود کنید از حالت ZIP خارج کرده و سپس با قرار دادن متنی همچون متن زیر در head سایت خود، این CSS را اعمال کنید.

<link href='/css/style.css' rel='stylesheet' type='text/css'>

در کد بالا فرض بر این است شما فایل CSS را در پوشه ای به نام css آپلود نموده و نام آن را style.css قرار داده اید.

سپس کد HTML پائین صفحه را اعمال کنید.

 

2- در این روش شما هر بار می توانید قبل از تصویر بخش مورد نظر خود از CSS را بصورت کد زیر (البته در حالت HTML ویرایشگر) ما بین تگ های style وارد نمائید. [این روش اصلاً توصیه نمی شود]

برای مثال ما افکت zoom in را بروی تصویر a.jpg  اعمال می کنیم:

 

<style>

/*** effect zoom in ***/

.img-zoom-in img
{
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}

.img-zoom-in:hover img
{
transform:scale(1.1);
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-ms-transform:scale(1.1);
-o-transform:scale(1.1)
}

/*** effect zoom out ***/

</style>

<div class="img-zoom-in">
<img src="/images/a.jpg">
</div>

3- در روش سوم لازم نیست شما فایل را آپلود کنید فقط کافیست با قرار دادن لینک زیر آن را از سایت ما اعمال نمائید.

<link href='http://misaqh.ir/demo/codecanyon/style.css' rel='stylesheet' type='text/css'>

 

و اما نحوه افکت گذاری بر روی تصاویر:

 

فقط کافیست با استفاده از فایل دمو، کلاس افکت مورد نظر خود را که بصورت آبی بر روی تصاویر نوشته شده است به این صورت به توضیحات نمایشی عکس اضافه نمائید.

برای مثال ما کلاس  image-hover img-zoom-in را بر روی تصویر a.jpg اعمال می کنیم.

 <div class="image-hover img-zoom-in"><img src="/images/a.jpg">

 
به همین سادگی...
تهیه توسط وب سایت میثاق
در صورت استفاده از متن لطفا منبع آن را نیز ذکر کنید.
در صورت داشتن سوال و ... در بخش نظرات ذکر کنید تا راهنمایی شود.

چاپ