۹ استایل متحرک برای تصاویر

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

 

در ابتدا می تونید دمو آنچه که قرار هست توضیح بدیم رو ببینید ، در انتها فایل دانلود هم آماده شده .

استایل مشترک برای همه افکت ها

ما ابتدا یک استایل مشترک داریم که برای همه ی افکت ها مورد نیاز هستش که این پایین قرار دادیم .

* {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -ms-box-sizing: border-box;
 box-sizing: border-box;

margin: 0; padding: 0;
}
/*PIC*/
.pic {
 height: 300px;
 width: 300px;
 overflow: hidden;
 margin: 60px;
 float: right;
}
.pic:hover {
 cursor: pointer;
}

چون قرار هستش ما باهاش فایل دمو هم بسازیم چندتا چیز مثل margin هم اضافه شده که این ها رو خودتون باید متناسب با قالب خودتون تغییر بدید . حالا تک تک به معرفی استایل ها می پردازیم .

استایل بزرگ شدن و zoom تصویر

با این استایل وقتی موس روی عکس حرکت می کنه تصویر در قاب خودش بزرگ میشه .

کدهای html به صورت زیر هستش .

<div class="grow pic">
 <img src="https://doctorwp.com/wp-content/uploads/2014/06/portrait.jpg" alt="portrait">
</div>

و استایل اون هم به شکل زیر می باشد .

/*GROW*/
.grow img {
 height: 300px;
 width: 300px;

 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -o-transition: all 1s ease;
 -ms-transition: all 1s ease;
 transition: all 1s ease;
}

.grow img:hover {
 width: 400px;
 height: 400px;
}

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

استایل کوچک شدن تصاویر zoom out

با این استایل وقتی موس روی تصویر میره تصویر کوچک یا shrink میشه .

 

کدهای html اون به شکل زیر هستش .

<div class="shrink pic">
 <img src="https://doctorwp.com/wp-content/uploads/2014/06/city.jpg" alt="city">
</div>

و کدهای css به قرار زیر

/*SHRINK*/
.shrink img {
 height: 400px;
 width: 400px;

 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -o-transition: all 1s ease;
 -ms-transition: all 1s ease;
 transition: all 1s ease;
}

.shrink img:hover {
 width: 300px;
 height: 300px;
}

استایل جابجا شدن افقی تصویر

در این استایل تصویر به صورت افقی جابجا میشه . مثال انتخاب شده یک نمونه از موارد کاربرد خوب این کد می باشد .

کدهای html به شکل زیر هستش .

<div class="sidepan pic">
 <img src="https://doctorwp.com/wp-content/uploads/2014/06/kick.jpg" alt="kick">
</div>

و کدهای css اون هم این شکلی هستش .

/*SIDEPAN*/
.sidepan img {
 margin-left: 0px;
 -webkit-transition: margin 1s ease;
 -moz-transition: margin 1s ease;
 -o-transition: margin 1s ease;
 -ms-transition: margin 1s ease;
 transition: margin 1s ease;
}

.sidepan img:hover {
 margin-left: -200px;
}

استایل جابجا شدن عموی تصویر

در این استایل شما تصویرتون عموی تکون می خوره ، مثال انتخاب شده گویا مطلب هستش .

کدهای html

<div class="vertpan pic">
 <img src="https://doctorwp.com/wp-content/uploads/2014/06/climb.jpg" alt="climb">
</div>

و کدهای css اون

/*VERTPAN*/
.vertpan img {
 margin-top: 0px;
 -webkit-transition: margin 1s ease;
 -moz-transition: margin 1s ease;
 -o-transition: margin 1s ease;
 -ms-transition: margin 1s ease;
 transition: margin 1s ease;
}

.vertpan img:hover {
 margin-top: -200px;
}

تا الان هرچی بود تصاویر جابجا میشد ، ازین به بعد تصاویر به جای جابجا شدن تغییر شکل میدن .

استایل چرخش تصاویر

در مطالب قبلی سایت هم شبیه این استایل رو داشتیم می تونید یک نگاهی هم به اون بندازید  ، استایل چرخش تصاویر سایت .

کدهای html اون به شکل زیر هستش .

<div class="tilt pic">
 <img src="https://doctorwp.com/wp-content/uploads/2014/06/car.jpg" alt="car">
</div>

و کدهای شیوه نامه یا همون استایل

/*TILT*/
.tilt {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.tilt:hover {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}

استایل گرد شدن تصاویر

در مورد این استایل هم در مطالب قبلی سایت هم شبیه این استایل رو داشتیم می تونید یک نگاهی هم به اون بندازید  ، استایل گرد شدن گوشه تصاویر .

کدهای html اون به قرار زیر هستش .

<div class="morph pic">
<img src="https://doctorwp.com/wp-content/uploads/2014/06/beach.jpg" alt="beach">
</div>

و کدهای css اون هم

/*MORPH*/
.morph {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.morph:hover {
border-radius: 50%;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

استایل فوکوس روی تصویر

نمونه انتخاب شده به خوبی کارائی این کد رو نشون میده .

کدهای html اون به شکل زیر است .

<div class="focus pic">
<img src="https://doctorwp.com/wp-content/uploads/2014/06/cricket.jpg" alt="cricket">
</div>

و کدهای css اون هم به شکل زیر می باشد .

/*FOCUS*/
.focus {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.focus:hover {
border: 70px solid #000;
border-radius: 50%;
}

در ادامه ۳ تا افکت مخصوص مرورگرهای Webkit ( گوگل کروم و safari ) رو باهم می بینیم .

استایل محو شدن تصویر

وقتی موس روی تصویر حرکت می کنه ، تصویر محو میشه .

کدهای html رو می بینید .

<div class="blur pic">
<img src="https://doctorwp.com/wp-content/uploads/2014/06/plane.jpg" alt="plane">
</div>

و کدهای css اون

/*BLUR*/
.blur img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.blur img:hover {
-webkit-filter: blur(5px);
}

استایل سیاه و سفید شدن تصویر

در مطالب قبلی سایت اسکریپت رنگی شدن تصاویر با jquery رو داشتیم که به نوعی برعکس این استایل زیر هستش ، دیدنش خالی از فایده نیست .

کدهای html در زیر آمده .

<div class="bw pic">
 <img src="https://doctorwp.com/wp-content/uploads/2014/06/sea.jpg" alt="sea">
</div>

و کدهای css.

/*B&W*/
.bw {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.bw:hover {
-webkit-filter: grayscale(100%);
}

دمو و دانلود فایل ضمیمه

• لینک دانلود
• مشاهده دمو انواع ۹ افکت
• منبع