آموزش ساخت یک افکت تصویری با css

سلامی دوباره به شما یک لرنی های عزیز ، امیدوارم حال همگی خوب باشه

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

بذارید اول یه نمونه از قالب رو ببینیم ، اگه خوشتون اومد ادامه رو بخونید :

پیش نمایش

کد اصلاح شد

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

تو مطلب “ظاهر شدن متن بر روی عکس با رفتن موس روی آن” که آقای محمد مهدی نوشته بودن این افکت با جاوا اسکریپت نوشته شده که می تونید به آن مراجعه کنید .

ولی تو این مطلب برای این افکت از css استفاده شده ، دوستانی که فقط می خوان از این افکت در سایت یا وبلاگشون استفاده کنن می بایست ابتدا کد زیر رو داخل تگ head قالبشون قرار بدن :

<link href="http://dl.1learn.ir/hakimi/ready-codes/image-effect/image-effect.css" rel="stylesheet" type="text/css">

سپس واسه این که تصویرتون رو به نمایش در بیارید باید کد زیر رو در مکان مورد نظر از قالبتون بذارید :

<div class="img-box img-box-top">
    <img src="آدرس تصویر" alt="">
    <div><span>توضیحات تصویر</span></div>
</div>

زیاد کد های بالا رو دستکاری نکنید ، ممکنه به هم بریزه 😀

در ضمن به جای کلاس img-box-bottom می تونید سه مقدار دیگه ی زیر رو قرار بدید .

Img-box-top : اگه خواسته باشید کادر تیره از بالای تصویر بیاد

Img-box-right : اگه بخواید کادر از راست وارد بشه

Img-box-left : کادر از چپ وارد میشه

اگه این جوری پیش میرفت احتمالا گزینه دهم دیگه پوچ بود 😀

خوب حالا دوستانی که دوست دارن بدونن چجوری باید چنین کدی بنویسن با ما همراه بشن :

اول یه تگ div با کلاس img-box باز کردیم که داخلش یه تگ تصویر img و یه div دیگه واسه کادر تیره هست .

استایل این تگ div بصورت زیر تعریف شده :

.img-box{
	display:inline-block;
	position:relative;
	overflow:hidden;
	vertical-align:middle;
	cursor:pointer;
	color:rgba(255,255,255,1);
}

تو خط 2 تعیین کردیم نوع نمایش باکس بصورت خطی – بلوکی باشه یعنی هم بشه داخل متن ازش استفاده کرد هم بتونه مقادیر عرض ، ارتفاع ، margin ، padding و … بگیره .

توضیح خط 3 یکم سخته ، فقط بدونین با این خاصیت ما باکس رو یه مبنا برای کادر تیره رنگ داخلش تعیین کردیم تا موقعیت کادر تیره نسبت به این باکس سنجیده بشه .

تو خط 4 ما تعریف کردیم که هر چی از داخل این کادر بیرون رفت نیست و نابود بشه ، قابل توجه اون باکس تیره 😀

 

حال باید کاری کنیم که کادر تیره مثلا بالای تصویر باشه و وقتی ماوس روی img-box قرار گرفت این باکس بیاد پایین .

پس با استفاده از سلکتور img-box div کادر تیره رو انتخاب می کنیم و خواص زیر رو بهش میدیم :

.img-box div{
	position:absolute;
	top:-100%;
	opacity:0;
	width:100%;
	height:100%;
        display:flex;
	text-align:center;
	background-color:rgba(0,0,0,.5);
	font-size:24px;
	transition:all 0.2s ease-in-out;
	-o-transition:all 0.2s ease-in-out;
	-ms-transition:all 0.2s ease-in-out;
	-moz-transition:all 0.2s ease-in-out;
	-webkit-transition:all 0.2s ease-in-out;
}

خط 2 میگه که موقعیت این باکس نسبت به تگ والد یا بالادست خود سنجیده بشه .

در خط 3 گفتیم این کادر به اندازه 100% بره بالاتر از تصویر تا اصلا روی تصویر نباشه ، این 100% همون مقدار ارتفاع تصویر خواهد بود. در ضمن تا خط 2 رو ننوشته باشید خاصیت top کار نمی کنه .

تو خط 4 ما مقدار opacity رو برابر 0 قرار دادیم تا کادر محو باشه و بعدا با تاخیر ظاهر بشه

تو خط 5 و 6 هم گفتیم مقدار عرض و ارتفاع کادر تیره برابر با ابعاد تصویر باشه تا کل تصویر رو پوشش بده

خوب تا اینجا ما کادر تیره رو قایم کردیم 😀

حالا با سلکتور img-box:hover > div می خواهیم کادر را ظاهر کنیم . مقدار top رو برابر 0 میذاریم تا ضلع بالای کادر تیره بیاد بچسبه به ضلع بالای تصویر . تا اینجا کادر رو پایین آوردیم ولی چون مقدار opacity یا شفافیت کادر 0 هست پس از کادر خبری نیست ، بنابراین این مقدار این خاصیت را 1 میذاریم :

.img-box:hover > div{
	top:0;
	opacity:1;
}

راستی تو این کادر مشکلی یه تگ span باز کردیم که حاوی متن توضیحی تصویر ما هست . استایلش هم به شرح زیره :

.img-box div span{width:95%;margin:auto;text-shadow:2px 2px 0 rgba(0,0,0,.5)}

کلیات کار و طراحی افکت همین بود بقیه استایل ها دیگه واسه زیبایی بیشتر کاره

امیدوارم خوب توضیح داده باشم تا همه شما مطلب رو متوجه شده باشید

در ضمن از دوستان تقاضا دارم اگه مشکلی تو افکت پیدا کردید به ما اطلاع دهید

به پایان رسیدیم مطلب ، آموزش همچنان باقیست

فرادرس

برچسب ها : ، ، ،