• اطلاعیه ها

    • Morteza

      باهم بسازیم: اطلس ووکامرس و وردپرس   14/07/96

      تاپیک ایجاد شده برای بحث در جهت ایجاد یک منبع، ویکی، صفحات توضیحی و یا بخش آموزشی جامع برای وردپرس و متعلقات مختلف آن است. لطفا جهت مشارکت در این بحث، ارائه پیشنهاد و یا انتقاد به تاپیک فوق مراجعه کنید. باهم بسازیم: اطلس ووکامرس و وردپرس
konjkav

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

4 پست در این موضوع قرار دارد

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

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

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

ممنون...

0

به اشتراک گذاری این پست


لینک به پست

سلام بر شما

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

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 رو به جای نوشته بیارید.

موفق باشید

2

به اشتراک گذاری این پست


لینک به پست

سلام بر شما

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

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

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

موفق باشید

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

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

0

به اشتراک گذاری این پست


لینک به پست

عجب! :)

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


<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

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

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری