کد CSS نمایش متن با آمدن موس روی عکس

فهرست مطالب
کد CSS نمایش متن با آمدن موس روی عکس

کد 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 از سایت وی بی ایران بوده .

موفق باشید.

یک پاسخ

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *