درخواست کد سی اس اس نمایش اطلاعات عنصر

[فرهاد-سئو 905]

سلام

در بعضی سایتها از تکنولوژی CSS3 برای نمایش اطلاعات یک پست یا عنصری با افکت زیبایی که قبلا فقط با جی کوتری ممکن بود

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

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

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

مثلا در سایت نفوذ طراح طوری طراحی کرده که اطلاعات در انتهای یک کادر مربع قرار داره

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

اما در سایت نفوذ شما در هر جای عکس موس رو برین اطلاعات رو نشون میده

از طرفی هم اگه بهش طول و عرض بدم چون لایه اولیه میشه, عکس رو پنهان میکنه

http://3rial.tv/category/view-download/nofooz-view-download-season-2/
http://www.lenzor.com/
pars-pakhsh.ir

#option .mywork a .info {
opacity:0;
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
position: relative;
top:101%;
background:rgba(172, 38, 13, 1);
font-family:BHoma;
font-size:15px;
color:#ffffff;
padding:2%;
text-align:center;
overflow:hidden;
}
#option .mywork a .info:hover {
background:rgba(172, 38, 13, 1);
font-family:BHoma;
font-size:15px;
color:#ffffff;
padding:2%;
text-align:center;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
opacity:1;
position: relative;
top:90%;
}

[فرهاد-سئو 905]

خب من تا حدودی تونستم بهش دست پیدا کنم

اما فکر نمیکنم اصولی شده باشه

دقت کنین کمی کلک هستش

#option .mywork a .info {
opacity: 0;
-moz-transition: all 0.7s ease-in;
-webkit-transition: all 0.7s ease-in;
-o-transition: all 0.7s ease-in;
-ms-transition: all 0.7s ease-in;
height: 24px;
padding-top: 85%;
overflow:hidden;
}
#option .mywork a .info:hover {
-moz-transition: all 0.7s ease-out;
-webkit-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
-ms-transition: all 0.7s ease-out;
opacity: 1;
padding-top: 75%;
}
#option .mywork a .info p {
background:rgba(172, 38, 13, 1);
font-family:BHoma;
font-size:15px;
color:#ffffff;
padding:3%;
text-align:center;
}

در این کدها من اول یه لایه بزرگ قرار دادم و زیر لایه , لایه اصلی قرار دادم تا تصویر زمینه که همون تصویر شاخص یا هر چیزی میتونه باشه نشون داده بشه

بعد یک زیر لایه برای متن قرار میدم و پنهان ( hidden) میکنمش

بعد برای اینکه انتهای کادر قرار بگیره بهش فاصله از بالای سر دادم (padding-top) و در حاور (hover) مقدارشو کم کردم

الان تقریبا میشه گفت مثل سایت نفوذ شده

اما نه تنها غیر اصولی هست بلکه یکم هم متفاوته

ممنون میشم راهنماییم کنید که بگین سایت نفوذ یا بقیه از چه ترفندی استفاده کردن؟

[imanfakhar 26231]

http://codepen.io/anon/pen/vueCi

[فرهاد-سئو 905]

کدها الان به درستی کار کردن

اما اینجا من هنوز از ترفند چیزی دستگیرم نشده که این کدها چطوری با هم در ارتباط هستن

فقط فهمیدم با پوزیشن, موقعیت گرفتن و زیر هم دیگه با overflow مخفی شدن

اما چرا برای همه عناصر پوزیشن استفاده شده

ممنون میشم یه وضیح مختصر بدین

[imanfakhar 26231]

عنصر اول با کلاس innerImage کار قاب را می کنه با طول و عرضی برابر تصویر با پوزیشن relative

داخل عنصر اول تصویر قرار داره و یک div با کلاس info این div قراره کار کشو را انجام بده و توضیحات ما را در حالت hover نمایش بده پوزیشنش absolute است که روی تصویر قرار بگیره و با توجه به پوزیشن مادر نقاط چپ راست بالا و پائینش بر اساس موقعیت innerImage دایو آخر با کلاس text فقط محل قرار گیری مطلب را یرای ما مشخص می کنه و در واقع باعث می شه مطالب از گوشه ها فاصله صحیح را داشته باشند می شه بجای این دایو از خاصیت padding برای کلاس info استفاده کرد ولی حالت نمایش در مرورگرهای مختلف تغییر خواهد کرد

خاصیت اصلی با دادن hover به لایه innerImage تغییر می کنه

دیگه فکر نکنم توضیحی مونده باشه که مورد نیاز باشه