درخواست افکت برای تصاویر سایت

[konjkav 80]

سلام خدمت همه دوستان

یه افکت برای عکس های سایت میخوام که مثلا وقتی موس رو میاریم رو عکس یه عکس Play رو نشون بده رو عکس.

کسی کدی؟ پلاگینی؟ چیزی داره واسه این کار؟

ممنون...

[sajjadnajafi 568]

سلام بر شما

این آموزش رو مطالعه کنید.. :

http://forum.wp-parsi.com/tutorials/article/367-%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%D8%B5%D9%81%D8%AD%D9%87-%D8%A2%D8%B1%D8%B4%DB%8C%D9%88-%D8%A8%D9%87-%D8%B4%DA%A9%D9%84-%DA%AF%D8%A7%D9%84%D8%B1%DB%8C/

مطلبی که دنبالش هستید میتونید از توش در بیارید. فقط شما میخواید شکل play بیاد اما تو این آموزش یک نوشته میاد روی تصویر که اون هم فکر کنم با کمی تغییر بتونید شکل play رو به جای نوشته بیارید.

موفق باشید

[konjkav 80]

سلام بر شما

این آموزش رو مطالعه کنید.. :

http://forum.wp-pars...و-به-شکل-گالری/

مطلبی که دنبالش هستید میتونید از توش در بیارید. فقط شما میخواید شکل play بیاد اما تو این آموزش یک نوشته میاد روی تصویر که اون هم فکر کنم با کمی تغییر بتونید شکل play رو به جای نوشته بیارید.

موفق باشید

خیلی سخت بود:دی

افزونشو نداریم؟

[sajjadnajafi 568]

عجب!

شما پس اینو امتحان کن:

<div class="itemsContainer">
<div class="image"> <a href="#"> <img src="http://test.ir/image.jpg" /> </a></div>
<div class="play"><img src="http://test.ir/play.png" /> </div>
</div>

در کد بالا به جای # آدرس لینک دلخواه و به جای test.ir/play.png و test.ir/image.jpg تصاویر دلخواه رو وارد کن. در فایل css قالب این موارد رو قرار بده:

.itemsContainer {
background:red;
float:left;
position:relative
}
.itemsContainer:hover .play{display:block}
.play{
position : absolute;
display:none;
top:20%;
width:40px;
margin:0 auto; left:0px;
right:0px;
z-index:100
}

نتیجه نهایی/دمو:

http://jsfiddle.net/twfJh/2/

منبع:

http://stackoverflow.com/questions/14889028/show-play-icon-on-image-hover

ویرایش شده شهریور 92 توسط sajjadnajafi