روکش دار کردن عکس با hover

[YOU 34]

سلام

میخوام با نوشتن css و بوسیله hover مثل عکس پیوست درست کنم

یعنی اول عکس سمت چپ هستش وقتی موس را روش قرار بدم یه لایه نازک مشکی روش بیاد بهمراه چند خط نوشته که میشه شکل سمت راست

[isk 4447]

برای هر تصویر یه متن مجزا؟ و این تصاویر از کجا فراخوانی میشن؟

[YOU 34]

برای هر تصویر یه متن مجزا؟ و این تصاویر از کجا فراخوانی میشن؟

یه تصویر سمت چپ سایت قرار داره باید براش تعریف کنیم که وقتی موس روش قرار میگیره بشکل سمت راست دربیاد

لطفا فقط با نوشتن Css

[isk 4447]

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

اما اگر فقط یک تصویر با یک متن ثابت باشه و فقط css بخواین :

img:hover { opacity: 0.8; background: url(../image/pic.png); }

البته کد بالا برای همه ی تصاویر سایتتون اعمال میشه و باید براش آی دی اون تصویر بخصوص رو بدید

pic.png تصویر متن نوشته است

برای تصویر اول هم باید png باشه تا ....

[YOU 34]

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

اما اگر فقط یک تصویر با یک متن ثابت باشه و فقط css بخواین :

img:hover { opacity: 0.8; background: url(../image/pic.png); }

البته کد بالا برای همه ی تصاویر سایتتون اعمال میشه و باید براش آی دی اون تصویر بخصوص رو بدید

pic.png تصویر متن نوشته است

برای تصویر اول هم باید png باشه تا ....

نه این اون چیزی نیست که من میخوام

یه عکس مثل زیر

<div class="q"><img src="http://yoursit.com/wp-content/uploads/pic.gif">

که در سایدبار سمت چپ قرار داده میشه

حالا یه css بنویسید که با موس روش کلیک کنی یه لایه مشکی کمرنگ بیاد روش همراه با یه نوشته ثابت یا توضیحات این بیاد(<?php the_author_meta('description'); ?> ) که شکلش مثل عکس سمت راست پیوست میشه

[Parsa 23463]

آموزش ایجاد لایه

http://www.html.net/tutorials/css/lesson15.php

برای تعیین شفافیت:

opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */

[YOU 34]

آموزش ایجاد لایه

http://www.html.net/...ss/lesson15.php

برای تعیین شفافیت:

opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */

این مثالی که زدید مربوط به شفافیت و z-index بود من سوالم در مورد ساختن کاور روی عکس همراه با نوشته هستش با برنامه نویسی css و hover

[عبدالماجد 3203]

فایل اتچ شده رو تست کنید :

image_hover3.zip