کد CSS ظاهر شدن عکس و نوشته و توضیح در سلکتور hover
درود !
با یه آموزش بسیار عالی و اختصاصی در خدمت شما هستیم
اول دمو رو ببینید ( این دمو همه ی آموزشو توش داره اما ما تک تک آموزش میدیم ) .
http://padz.zzl.org/vbiran/minicss/tiper.html
- مرحله اول : اومدن عکس در صورت اومدن موس روی عکس ! ( کد CSS نمایش متن با آمدن موس )
- شاید شما هم میخواید یه تولتیپ بسیار زیبا درست کنید . مثلا شما یک عکس که شامل توضیحات هست رو در نظر میگیرید و در نظر دارید با اومدن موس روی یه عکس دیگه اون عکس که شامل توضیحاته بیاد ! ( در دمو عکس آبی عکس اصلیه و عکس کوچیک لوگو وی بی ایران نقش tooltip رو داره ! )
میریم سر آموزش : فرض کنید این کد سورس ما هست :
<div class="vbiranparssofttiper"> <img src="http://myup.ir/images/20844450377752411588.jpg"> <span><img src="http://www.vbiran.ir/images/vbiranv5/statusicon/forum_new-48.png"/></span> </div>
.
اگه کد بالا رو بدون استایل در نظر بگیرید فقط دو تا عکس زیر هم هستن .
اما شما می تونید به کد بالا استایل بدید ، این چنین :
.vbiranparssofttiper { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } } .vbiranparssofttiper span { opacity:0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;} .vbiranparssofttiper:hover span { opacity:1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}
( اگه میخواین tooltip بیاد خط پایین یه <br> بزنید )
.
- مرحله دوم: اومدن متن بعد از اوردن موس رو عکس !
- این مرحله دقیقا مثله مرحله قبلیه با یکم تغییر ،
- به این دو تا مشخصه توجه کنید و خودتون متوجه میشید: color , line-height
- عملا ما داریم دستور میدیم زمان اومدن موس بر روی آیتم مورد نظرمون که با کلاس ( class=”vbiranparssofttiper” ) مشخص کردیمش ، دو صفت ( attribute ) : ارتفاع لاین و زنگ تغییر کنه.
.vbiranparssofttiper { line-height: 0px; color: transparent; font-size: 35px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; font-family:tahoma; } .vbiranparssofttiper:hover { line-height: 30px; color: black; }
.
امیدوارم این آموزش کاربردی بوده باشه.
لازمه عرض کنم ، این مطلب توسط بروبچه های داده پردازان مدرن ویرایش و تکمیل سازی شده ، اصل مطلب به نویسندگی دوست خوبمون : jcs.w از سایت وی بی ایران بوده .
موفق باشید.
یک پاسخ
سلام
من می خوام تو سایتم که تازه شروع کردم از همنین دیگاه ها بزارم لطفا کمکم کنید.