متن روی عکس

[mehran63]

سلام
به سایت زیر یه نگاه بندازید منظورم رو بهتر متوجه میشید
وقتی موس روی هر کدام از باکسها قرار میگیره متن کل باکس رو میگیره و میخوام از پایین به سمت بالا بیاد
لینک سایت (http://dribbble.com/)

[mehbod.rayaneh]

سلام
برا این کار میتونید از خاصیت opacity (http://www.w3schools.com/cssref/css3_pr_opacity.asp)استفاده کنید!
روی عکس 1 div دیگه میسازید و opacity=0 میدید! و در :hover باید opacity=1 بدید!

[mehran63]

اگه یه مثال بزارید ممنون میشم

[mhbitarafan]

<div class="class1" style="opacity:0.0;">DDDDD</div>
.class1:hover {opacity:1.0}

[mehran63]

خب این برای شفافیت (transparent) المان هست
مسئله اینجاست که چطور این div را روی آن المان (عکس) دیگر قرار بدم و کاری بکنم که اول نباشه بعد وقتی موس رفت روی عکس از پایین به بالا ظاهر بشه

[mehran63]

پس چی شد؟
همینطور که در اون لینک میبینید، در یک صفحه حدود 20 تا باکس وجود داره که باید یه div دیگه بیاد روش. حالا چطور مختصات تک تک این باکسها رو بدست بیارم که div رو در اون مختصات قرار بدم؟

[mehran63]

کسی نمیدونه چه باید کرد؟

[mehbod.rayaneh]

الان منتظرین براتون کد آماده بسازن آیا؟ :متفکر:
خودتون تلاش کنید! کد بنویسید! هر جا ک گیر کردید بپرسید!

[mehran63]

دوست عزیز شما مثل اینکه کلا اعصاب نداری
یه نگاه به تایپیک بنداز
کد نوشتم ولی سوالم اینجاست که چطور مختصات این باکس ها رو به دست بیارم؟ آیا تک تک باید مختصات هر کدوم تو یه صفحه که بر فرض 30 تا از این باکسها هست رو به دست بیارم شاید هم چند صفحه؟
راهی هست که خودش هر جا یه باکس بر فرض با یه اسم کلاس یا آیدی خاص باشه روش قرار بگیره؟

[mehbod.rayaneh]

اعصاب؟ من؟ داشتم! ندارم؟ ببقشید اگه بد گفتم! منظوری نداشتم!
در کل ببینید! شما چنتا باکس ایجاد میکنید و روی هم قرار میدید! خوب؟ کل باکسها را میذارید توی 1 باکس دیگه! بعدم بهش میگید وقتی موس اومد روی باکس وضوح نمایش را بکن 1!
خوب؟
بعد ینی چی مختصات؟ مختصات چیشو میخواید؟!:متفکر:

[mehran63]

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

کد CSS
.div-img
{
position:absolute;
margin-left:300px;
margin-top:50px;
width:800px;
height:120px;
border-style:groove;
border-color:Red;
}

.div-on-img1
{
position: absolute;
width: 162px;
height: 70px;
background-color: Black;
margin-top: 107px;
margin-left: 540px;
opacity: 0.0;
color: #FFFFFF;
}

کد JQuery
$("document").ready(function () {
$(".div-on-img1").mouseover(function () {
$(".div-on-img1").css("opacity", "0.7");
});

$(".div-on-img1").mouseleave(function () {
$(".div-on-img1").css("opacity", "0.0");
});
});

مشکل من روی قسمت CSS هستش یه نگاه به قسمت .div-on-img1 بندازید. این یعنی این که برا تک تک باکسها باید مختصات چپ، راست، بالا، پایین رو بدست بیارم و برا هرکدوم یه
.div-on-img1 جدا بنویسم. حالا اگه بخوام چند صفحه از این باکسها داشته باشم و در هر صفحه 30 تا باکس باشه خودت ببین که چند تا رو باید به دست بیارم

[mehbod.rayaneh]

حالا چرا با جاوا نوشتید؟ خوب از :hover توی css استفاده میکردید!!!
ب هر حال!
شما ک اصن مشکلتون این نیست! شما تو چیدمان اینا کنار هم مشکل دارید!!! درسته؟
اگه تو چیدمان مشکل دارید باید این کاری ک میگم را بکنید!
بیاید 1 دیو درست کنید و همه اینا را داخلش قرار بدید! حالا بگید از راست چیده بشن و هر دیو از سمت راست 1 مقدار دلخواهی فاصله بگیره!
اگه اندازه دیو ها حساب شده باشه و فاصله هم حساب شده باشه خودش ب ترتیب اینا را کنار هم میچینه و وقتی سطر اول پر شد ب سطر بعد منتقل میکنه و مثلا چهار تای دوم را زیر اونها قرار میده!

[mehran63]

اگه با یه سورس مثالی بزنی ممنون میشم

[2undercover]

شما باید یک div کلی بسازید که عکس و اون متنی رو که وقتی ماوس روی عکس ظاهر میشه رو در بر بگیره.

ما برای اون div اصلی برای مثال کلاس div-image رو در نظر می گیریم و برای اون div که متن رو در بر داره کلاس image-overlay.

بعد چون شما می خواید که اون متن از بالا به سمت پایین بیاد و نمایش داده بشه باید به div-image خاصیت overflow: hidden; رو بدید تا اون متن وقتی خارج از div اصلی هست دیده نشه ; همچنین خاصیت position این div رو هم برابر relative قرار تا وقتی به image-overlay خاصیت position: absolute دادیم مکانش بر اساس div-image تنظیم بشه.

تا اینجا اینجوری:

.div-image
{
position: relative;
overflow: hidden;
}
.image-overlay
{
position: absolute;
top: -100%;
right: 0;
}


همونطور که می بینید به image-overlay خاصیت top: -100% رو دادیم اینکار باعث میشه که image-overlay از بالای div-image کاملا خارج بشه ; بعد هم کافیه کاری کنیم وقتی ماوس روی div-image رفت image-overlay از بالا به پایین بیاد که اینجوری میشه:


.div-image:hover .image-overlay
{
top: 0;
}


در انتها هم انیمیشن ها و استایل های دیگه رو اضافه می کنیم:


.div-image
{
position: relative;
overflow: hidden;
background-color: white;
box-shadow: 0px 0px 2px 0px black;
}
.image-overlay
{
position: absolute;
top: -100%;
right: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
transition: all ease-in-out .4s;
-webkit-transition: all ease-in-out .4s;
-moz-transition: all ease-in-out .4s;
-ms-transition: all ease-in-out .4s;
-o-transition: all ease-in-out .4s;
}
.div-image:hover .image-overlay
{
top: 0;
}

[mehran63]

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

[2undercover]

دقت کنید که این کد کامل نیست برای مثال شما باید به div-image اندازه بدید (width و height) و گرنه مرورگر انداره 0 براش در نظر می گیره; همچنین به ساختار HTML که باید این شکلی باشه دقت کنید:



<div class="div-image">
<div class="image-overlay">
متن مورد نظر شما!
</div>
</div>

[mehran63]

تا اینجاش رو لطف کردید بقیش رو هم لطفا بگید، من که هر کاری میکنم نمیشه

[2undercover]

به این نمونه یک نگاه بندازید: