رفتن به مطلب

تغییر عکس هنگام رفتن موس بر روی آن


پست های پیشنهاد شده

با سلام چگونه میتونم یک عکسی که مثلا به رنگ طوسی هست با رفتن موس بر روی آن به رنگ طوسی پرنگ در بیارم

برای مثال به لینک زیر رفته و در فودر سایت 4 آیکون فیسبوک ، یویتر ، RSS و... نگاه کنید

به این صورت

http://www.templatem...demo/45593.html

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

ویرایش شده توسط M.At
لینک به ارسال

سلام

مورد اولتون رو باید با css انجام داد. خاصیت opacity میتونه شفافیت رو تعیین کنه. بدین صورت که اول به عکس مورد نظرتون یک کلاس تعریف میکنید و در استایل:

opacity: 0.5;

رو بهش بدید و به hover همون کلاس مقدار:

opacity: 1;

رو بدید.برین شکل چیزی مثل همون نمونه ای که دادید درست میشه. 1 بیشترین شفافیت و 0 نامرئی کامل است.

در مورد مورد دومتون هم اینجا ها شاید به کارتون بیاد:

http://mihanlearn.com/articles/%D8%AA%D8%A8%D8%AF%DB%8C%D9%84-%D8%AA%D8%B5%D8%A7%D9%88%DB%8C%D8%B1-%D8%B1%D9%86%DA%AF%DB%8C-%D8%A8%D9%87-%D8%B3%DB%8C%D8%A7%D9%87-%D8%B3%D9%81%DB%8C%D8%AF-%D8%A8%D8%A7-css/

لینک به ارسال

و اگر بخوام از سیاه و سفبد به رنگی ببرم به چه صورت هست ؟

دوست عزیز عکس سیاه سفید رو که نمیشه با CSS رنگی کرد :D شاید بشه بهش یک طیف رنگی ثابت داد .

اگر منظورتون اینکه هنگام سیاه سفید شدن دوباره به حالت اول برگرده و رنگی بشه میتونید Hover تعیین کنید .

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

لینک به ارسال

بله منظورم این هست که یک عکس رنگی سیاه سفید شود با css و وقتی موس روی آن میرود به صورت رنگی نمایش یده

لینک به ارسال

سلام دوست عزیز

ببینید یه توضیحی عرض کنم ; خاصیت opacity مربوط به شفافیت تصاویر (کمرنگ شدن) هست ، مثلا شما خاصیت opacity:0.5 رو به تصویریتون میدید اینکه با hover شدن تصویر شما کمرنگ میشه یا پررنگ یا تغییر رنگ میده ربطی به opacity نداره چون شما با دادنه این خاصیت عکستون رو کمرنگ کردید و بازتابی از پس زمینه عکس در تصویر ایجاد میکنید!

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

نمایش سیاه و سفید:


img{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}

ویرایش شده توسط alireza.nh
لینک به ارسال

ببینید من از این دستور استفاده کردم

http://mihanlearn.co...اه-سفید-با-css/ در این سایت

عکسم رو سیاه سفید کردم با این کد حالا میخوام وقتی موس روش رفت عکس دوباره برگرده به حالت رنگی ؟


img.desaturate {
filter: grayscale(1%);
-webkit-filter: grayscale(100%); -moz-filter: grayscale(1%);
-ms-filter: grayscale(1%); -o-filter: grayscale(1%);
filter: url(desaturate.svg#greyscale);
opacity: 0.4;
}

img.desaturate img:hover {
opacity: 0.4;
}

این عکسم هست


<div class="Apps"><a class="tooltip" title="دانلود برای اندروید" href="#"><img class="desaturate" src="<?php bloginfo('template_directory'); ?>/images/AndroidApp.png" alt="اندروید" border="0"/></a></div>

ویرایش شده توسط M.At
لینک به ارسال

img.desaturate {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
-moz-transition: all 1.8s linear .2s;
-o-transition:all 1.8s linear .2s;
-webkit-transition: all 1.8s linear .2s;
transition: all 1.8s linear .2s;
}
img.desaturate:hover {
filter: grayscale(0);
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-ms-filter: grayscale(0);
-o-filter: grayscale(0);

}

لینک به ارسال


img.desaturate {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url(desaturate.svg#greyscale);
-moz-transition: all 1.8s linear .2s;
-o-transition:all 1.8s linear .2s;
-webkit-transition: all 1.8s linear .2s;
transition: all 1.8s linear .2s;
opacity: 0.4;
}
img.desaturate:hover {
filter: grayscale(0);
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-ms-filter: grayscale(0);
-o-filter: grayscale(0);
}

کد استفاده شده

و clss استفاده شده


<div class="Apps"><a class="tooltip" title="دانلود برای اندروید" href="#"><img class="desaturate" src="<?php bloginfo('template_directory'); ?>/images/AndroidApp.png" alt="اندروید" border="0"/></a></div>

اما تغییری انجام نمیشه ؟

این هم svg استفاده شده


<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="greyscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0"/>
</filter>
</svg>

نام svg هم desaturate.svg هستش نه در فایر فاکس و نه در کروم عمل میکنه

ورژن فایرفاکس 30 هستش

ویرایش شده توسط M.At
لینک به ارسال

svg اینجا چی کاره است من متوجه نشدم

تا جایی که من اطلاع دارم کدهای webkit به صورت معمول روی فایرفاکس نصب نمی شند همینطور روی اپرا و مرورگرهای اپلی (سافاری) و کروم (مثل گوگل کروم) که شامل خانواده مرورگرهای اندرویید هم می شند ازشون پشتیبانی می کنند

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

http://mandegarweb.com/wordpress/wordpress-tools/%DA%98%D9%86%D8%B1%D8%A7%D8%AA%D9%88%D8%B1-%D9%BE%D8%A7%D8%B1%D8%B3%DB%8C-%D9%88%D8%A8-%DA%A9%DB%8C%D8%AA/

و ژنراتور وب کیت

لینک به ارسال

من از این آموزش استفاده کردم ؟

آموزش سیاه سفید کردن

اینجوری که شما تعریف کردین من متوجه نشدم حالا پشتیبانی میشه یا خیر؟ من سایتم html 5 هم هست. من العان تونستم عکسم رو سیاه سفید کنم از این کد اما مشکلی که اینجا هست عکس وقتی موس روش میره رنگی نمیشه ؟ با استفاده از کدی که دادید hover اما رنگی نشد ؟ من منظورم این هستش و این مشکل من هست نه اینکه عکسم سیاه سفبد نشه ؟؟؟؟؟؟؟

ویرایش شده توسط M.At
لینک به ارسال

چگونه یک عکس رو سیاه سفید کنم و بعد از رفتن موس روی اون عکس به صورت آهسته به صورت اولیه برگرده ؟؟؟؟ من منظورم این هست و این رو میخوام ؟ :(

خودم کدش رو پیدا کردم

ویرایش شده توسط M.At
لینک به ارسال
  • 3 سال بعد...

به گفتگو بپیوندید

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

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...